CODEWITHSUNDEEP
javascriptreactjs
sp3
sp3

Reputation: 74

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

Upvotes: 0

Views: 38

Answers (2)

Benjamin
Benjamin

Reputation: 1070

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

EDIT

I'm not sure what I was thinking with the above. Really, it should be two components, and neither one needs to be stateful.

//Index.js
export default const Index = ({ recipes }) => {
  return (
    <ul>
      {
        recipes.map( ({ ingredients, name }, index) => {
          return <Recipe key={index} ingredients={ingredients} name={name} />
        })
      }
    </ul>
  );
}

//Recipe.js
export default const Recipe = ({ ingredients, name }) => {
  return (
    <li>
      <button className="delete-button">Delete</button>
      {name} - {ingredients}
    </li>
  );
}

Upvotes: 2

Madalosso
Madalosso

Reputation: 126

Incorrect use of function/component

You can either create a Component called fullRecipe to display the information, or bring the function fullRecipe to Index component.

check this link https://facebook.github.io/react/docs/multiple-components.html

Upvotes: 0

Related Questions