The error “Key is not a prop. Trying to access it will result in `undefined`” is caused by the developer intentionally accessing the key as a prop. This article will tell us about the error’s reason and detailed solutions.
The reason for the error “Key is not a prop. Trying to access it will result in `undefined`”
When you see the error “Key is not a prop. Trying to access it will result in `undefined`”, it means the program is recognizing you to access the component’s fundamental property as props. Follow the code below to know when this error occurs.
Code:
import Title from "./Title";
const App = () => {
const titles = [
"The implications of global warming",
"How cats and dogs love their masters",
"Ten rules for creating a chemical at home",
];
return (
<>
{titles.map((title, key) => {
return <Title key={key} title={title} />;
})}
</>
);
};
export default App;import React from 'react';
const Title = ({ key, title }) => {
return <h1 >{title}</h1>
};
export default Title;Output:
The warning appeared on the console because you are passing the key from the parent component to the child component, which is not allowed in React rules. ReactJS will use the key in the reconciliation process, comparing the old tree with the new tree, so by default, the key attribute will be warned to add when you use the map() method. Follow the next part of the article to know how to fix this error.
How to fix this error
Change the prop name to different from ‘key’
Because you are passing the prop from the parent component to the child component with the prop name ‘key’, the program will recognize that you are passing the key value of the element. This will do the opposite of React document, so the program will warn you so you can know and fix it, like in the example below.
Code:
import Title from "./Title";
const App = () => {
const titles = [
"The implications of global warming",
"How cats and dogs love their masters",
"Ten rules for creating a chemical at home",
];
return (
<>
{titles.map((title, key) => {
return <Title key={key} titleKey={key} title={title} />;
})}
</>
);
};
export default App;import React from 'react';
const Title = ({ titleKey, title }) => {
return <h1 data-key={titleKey}>{title}</h1>
};
export default Title;Output:
In the above code, we have renamed the Title component’s prop from key to titleKey. The warning will no longer appear, and you can usually access this new prop key. For example, we can put the data-key of the h1 tag inside the child component with the keys on the parent component.
Stop accessing the key as a prop in the child component
In this solution, we’ll do exactly what the warning instructs us not to access the key as a prop anymore. The key will no longer be called in the parameter of the function component like the code below.
Code:
import React from "react";
const Title = ({ title }) => {
return <h1>{title}</h1>;
};
export default Title;Although in the parent component, the syntax of declaring the key in the component tag is the same as how we pass a prop, it is not allowed to access. The simplest way is not to access it anymore, and the program will generally run with no more errors.
Summary
In summary, the article has mentioned the reason for the “Key is not a prop. Trying to access it will result in `undefined`” error and the solutions to prevent it from happening. However, I recommend using the change prop name to be different from the ‘key’ method because we need to pass the value of the key.
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs