Search code examples
reactjsreduxwarningsreact-reduxreact-router-redux

React Unknown Prop Warning

I was trying to render a DOM element with a prop but my attempt is not recognized by React as a legal DOM attribute/property.

So I started researching for a solution and I found this source from React Warning Documentation. However, although well explained, I have a deeper problem that will involve a deeper solution therefore.

As an example of code I will introduce the ExampleContainer method:

export let ExampleContainer = (props) => {

    return (
        <DetailsContainer tabs={props.tabs} activeTab={props.activeTab}>
            {props.children}
        </DetailsContainer>
    )
}

Now I have my mapStateToProps receiving a statethat I beleave is well implemented and I will bring it here just to context my problem:

const mapStateToProps = (state) => {
  return {
    i18n: state.i18n,
    activeTab : state.example.activeTab
  }
}

Finally, the problem is inside my mergeProps where I have this tabs source giving me the problem and more specificly inside it on the i18n attribute:

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  return Object.assign({}, ownProps, {
    tabs: [
      {
        'onClick' : dispatchProps.goToExampleOptionA,
        'key' : 'ExampleOptionA',
        'i18n' : stateProps.i18n.Tabs.exampleOptionATab

      },
      {
        'onClick' : dispatchProps.goToExampleOptionB,
        'key' : 'ExampleOptionB',
        'i18n' : stateProps.i18n.Tabs.exampleOptionBTab
      }
    ]
  }, stateProps)
}

The problem is when I open my Container it brings to me this warning:

enter image description here

And my DeyailsContainer component is this one:

let DetailsContainer =  ({
    tabs,
    rightIcons,
    activeTab,
    children
}) => {
    return (
        <div>
            <Tabs tabs={tabs} rightIcons={rightIcons} activeTab={activeTab}/>
            <div className="app-wrapper">
                {children}
            </div>
        </div>
    )
}
Solution

  • This is due to passing your i18n prop directly into a <div i18n="whatever" /> somewhere.

    My guess is it's inside your DetailsContainer component. If you're spreading all of the props your component receives into the div like this <div {...props} />, that will definitely do it.

    React has warnings now when you try to pass some type of prop that isn't a standard attribute for a DOM element. If you need the i18n as an attribute for a reason like this... HTML tags in i18next translation, you'll want to change that to data-i18n as the prop.