props aren't defined in my app is throwing an undefined error. Once the state is defined, it doesn't rerender the component with the new props.
render(){
// console.log("RENDER PROPS", this.props)
const { name, category, price, img} = this.props
return(
<div>
<h2>={name}/>
<h4>{category}/>
<h3>{price}</>
<img={img}/>
</div>
)
}
}
you should save props in inner state in the component see the example.
export default function Page({ nameFromProps , ageFromProps }) => {
const [name , setName] = useState(nameFromProps );
const [age, setAge] = useState(ageFromProps );
useEffect(() => {
setName(nameFromProps);
setAge(ageFromProps);
},[nameFromProps]);
return (<div> Data : {name}{age} </div>)
}
It is not very clear that how you pass props to the component , maybe there is mistake in this step , but for check you can use
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
to check your props value and force to re render or not