Sylar Sylar - 2 months ago 29
React JSX Question

Warning Unkown Prop

Using

React.createClass({})
I could easily pass props to a child component. How to do it with
React.Component{}
?

export default class Parent extends React.Component {
// imported Child and in the render:
render(){
return <Child name={this.state.foo} />
}
}

export default class Child extends React.Component {
}



Warning unkown prop 'name'

Answer

The way of passing prop is the same, however you need to check whether you are defining the state variable correctly. Look at the below implementation. There might be a set of reason for the above errors namely;

Are you using {...this.props} or cloneElement(element, this.props)? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.

You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described on MDN.

React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered.

Also check which version of react are you using and that you are correctly setting up the react to work with ES6 syntax.

PS: I am using version 0.14.8 for the below snippet

 class Parent extends React.Component {
  // imported Parent and in the render:
  constructor(){
    super();
    this.state = {
      foo: 'Hello World'
    }
  }
  render(){
    return <Child name={this.state.foo} />
  }
}

 class Child extends React.Component {
  
  render() {
    return (
      <div>{this.props.name}</div>
    )
  }
}


ReactDOM.render(<Parent />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container"></div>