CODEWITHSUNDEEP
reactjs
Sylar
Sylar

Reputation: 12082

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'

Upvotes: 0

Views: 100

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 281734

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>

Upvotes: 1

Mouad Debbar
Mouad Debbar

Reputation: 3226

Here is a complete explanation of the warning: https://facebook.github.io/react/warnings/unknown-prop.html

Basically, it seems that you are passing the name prop down to an HTML element that doesn't support a name attribute.

Upvotes: 0

Related Questions