I am making a get request from my React App to my backend. The call is successfull and I am able to receive the values from backend. However, I am not able to set the value to the front end DOM. Here is how my class currently looks:
class App extends React.Component{
componentDidMount(){
this.props.getData();
}
renderProds(){
const data = this.props.products;
if(data){
data.map((e)=>{
return (
<Product
name={e.name}
desc={e.desc}
/>
);
});
}
}
render(){
return(
<div>{this.renderProds()}</div>
)
}
}
I've made sure that my Product component is imported correctly and it is accepting the props name and desc.
What am I doing wrong?
You should return something from your renderProds methods. Try this:
renderProds(){
const data = this.props.products;
if(data){
return data.map((e)=>{ // return computed value
return (
<Product
name={e.name}
desc={e.desc}
/>
);
});
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments