CODEWITHSUNDEEP
javascriptreactjsasynchronous
Singh
Singh

Reputation: 1988

Pass the value of a props from a function to render() in React.JS

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?

Upvotes: 0

Views: 43

Answers (1)

L_K
L_K

Reputation: 2986

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}
                   />
                );
            });
        }
    }

Upvotes: 1

Related Questions