Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React: ref is not a prop

Tags:

reactjs

When using React.js

Why do I get `ref` is not a prop & `key` is not a prop. error

Notes

  • however I do not get this error running with webpack-dev-server.
  • I do not have ref or key defined in any of my react components.
like image 859
shawn Avatar asked Jun 29 '16 03:06

shawn


People also ask

Is ref a prop?

That's because ref is not a prop. Like key , it's handled differently by React. If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component.

Why is key not a prop?

React Warning: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

What is REF IN React?

Refs provide a way to access DOM nodes or React elements created in the render method. In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props.

Is not a prop trying to access it?

The warning " key is not a prop. Trying to access it will result in undefined being returned" is caused when we try to access the key prop of a component in React. To solve the error, pass a prop with a different name to your component. Here is an example of how the warning is caused.


1 Answers

Check this out: https://github.com/facebook/react/pull/5744

ref and key are reserved prop names in React, and are used internally. That's why you are getting this warning.

If you want to use ref, use this.refs.yourinput

like image 100
Piyush.kapoor Avatar answered Oct 19 '22 20:10

Piyush.kapoor