sp3 sp3 - 2 months ago 10
Javascript Question

React doesn't create the required elements

I have the following code. It doesn't render the fullRecipe items at all but i see nothing wrong in here. I have trouble learning this framework and after asking nobody knows what's happening... Do you see what's wrong?

Thanks

class Index extends React.Component {
constructor() {
super();
}
render() {
var list_results = this.props.recipes.map(function(recipe, index){
console.log(index); //Happens
console.log(recipe); //Happens
return (<fullRecipe recipe={recipe}></fullRecipe>);
});
return (<ul>{this.list_results}</ul>)
}
}
function fullRecipe(props) {
console.log(props || "no props"); // Doesnt happen
return (<li><div class="delete-button">Delete</div>{props.name} - {props.ingredients}</li>);
}

Answer

fullRecipe needs to either be part of the Index class or made into another component.

You're also using this.list_results, which should be just list_results. this is the context of the whole class, whereas your var is local to render().

The simplest method would be:

class Index extends React.Component {
  constructor() {
    super();
  }
  fullRecipe() {
    return (<li><div class="delete-button">Delete</div>{this.props.name} -   {this.props.ingredients}</li>);
  }

  render() {
    var list_results = this.props.recipes.map((recipe, index) => this.fullRecipe(recipe));
    return (<ul>{list_results}</ul>)
  }
}