React Provider Pattern, prop not updating in child component - reactjs

Question

So i have written a provider to pass strings to any part of my application. The issue i have is that if i add a strings prop to my child component it overrides the entire prop and seems to ignore the merge i do in connector
Provider
import { Component, Children } from 'react'
import PropTypes from 'prop-types'
export default class StringsProvider extends Component {
static propTypes = {
children: PropTypes.element.isRequired,
strings: PropTypes.object
}
// Specify what is being added to context
static childContextTypes = {
strings: PropTypes.object.isRequired
}
getChildContext() {
const { strings } = this.props
return { strings: strings }
}
render() {
return Children.only(this.props.children)
}
}
Connector
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
// here we basically create a HOC that returns on Context (This is our component).
// The HOC adds the merged strings set to the Context Component and then renders it
export default (WrappedComp, defaultStrings, stringNameSpace) => {
return class StringsComponent extends Component {
static propTypes = {
strings: PropTypes.object.isRequired
}
static contextTypes = {
strings: PropTypes.object.isRequired
}
// Takes the defaultStrings from the context and merges them with the
// strings passed to the Context Component
getStrings = () => {
let out
if (this.props.strings) {
console.log('defaultStrings: ' + Object.values(defaultStrings)[0])
console.log(
'this.context.strings[stringNameSpace]: ' +
Object.values(this.context.strings[stringNameSpace])[0]
)
console.log(
'this.props.strings: ' + Object.values(this.props.strings)[0]
)
out = _.merge(
defaultStrings,
this.context.strings[stringNameSpace] ? this.context.strings[stringNameSpace] : {},
this.props.strings
)
} else {
out = _.merge(defaultStrings, this.context.strings[stringNameSpace])
}
console.warn('out')
console.log(out)
return out
}
render() {
return <WrappedComp strings={this.getStrings()} {...this.props} />
}
}
}
Component
import React, { Component } from 'react'
import { connectStrings } from './../../src'
import PropTypes from 'prop-types'
import defaultStrings from './strings'
class SampleComponent extends Component {
static propTypes = {
strings: PropTypes.object.isRequired
}
render() {
const { strings } = this.props
console.warn(strings)
return (
<div>
<span>{strings.str1}</span>
<span>{strings.str2}</span>
<span>{strings.str3}</span>
</div>
)
}
}
export default connectStrings(
SampleComponent,
defaultStrings,
'sampleComponent.ui.SET_TWO'
)
Unit test to run
import renderer from 'react-test-renderer'
import React from 'react'
import { StringProvider } from '../src'
import SampleComponent from "../components/sampleComponent";
describe('String Provider Tests', () => {
it('should render', () => {
const strings = {
'sampleComponent.ui.SET_ONE': {
str1: 'SET ONE'
},
'sampleComponent.ui.SET_TWO': {
str1: 'SP Str1',
str2: 'SP Str2'
}
}
const tree = renderer.create(
<StringProvider strings={strings}>
<SampleComponent strings={{str3: 'test'}}/>
</StringProvider>
)
expect(tree).toMatchSnapshot()
})
})
Im not sure what i am missing here, but strings seems to be updated in the connector but not in the component, is there something im not doing correctly?

Answer 1

How silly, ht answer was simple, below i just needed to change the order the props were added in the wrapped component
return <WrappedComp strings={this.getStrings()} {...this.props} />
It seems that as this.props also contained strings it was overwriting the result of the GetStrings() function.