Sometimes, we may run into the ‘Special Props Warning’ when we’re developing React apps.
In this article, we’ll look at how to fix the ‘Special Props Warning’ when we’re developing React apps.
Fix the ‘Special Props Warning’ When Developing React Apps
To fix the ‘Special Props Warning’ when we’re developing React apps, we shouldn’t accessing special props in our React components.
Special React component props includes the key and ref props.
They aren’t passed into the component.
For instance, we shouldn’t write code like:
const Foo = ({ ref }) => {
return <Comp foo={ref} />;
};
or
const Foo = ({ key }) => {
return <Comp foo={key} />;
};
since ref and key are special props that can’t be accessed by the component that’s receiving the props.
If we need to pass in values to the prop, we shouldn’t use key or ref as prop names.
Instead, we write something like:
const Foo = ({ id }) => {
return <Comp foo={id} />;
};
const Bar = () => {
return <Foo id={1} />;
};
which do not attempt to access those props in any component code.
Conclusion
To fix the ‘Special Props Warning’ when we’re developing React apps, we shouldn’t accessing special props in our React components.
Special React component props includes the key and ref props.
They aren’t passed into the component.
