Accessing all specific properties

So I have my recipeList state, and inside contains the name, directions, and ingredients of the recipe which is also an array. I just want to a list of the names on the recipes. How would I go about doing that?

class RecipeBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     recipeList :
      [{
        recipe: "Tacos",
        directions: "make tacos",
        ingredients: ["meat"]
      },
      {
        recipe: "pizza",
        directions: "bake",
        ingredients: ["dough"]
      }]
    };
  }
  
  render(){
    //render names here
    return(
      <div>
        <ul>                                                     
        
        </ul>
        </div>
    )
  }

}
ReactDOM.render(<RecipeBox />, document.getElementById('app'));

Inside your ul JSX you can use curly brackets to write some Javascript. So you can map through recipeList using this.state.recipeList and grab only names of the recipes.

changed the title of question. I was originally playing around with ingredients which where the second array came from. I tried this, but not luck

 const ITEMS = this.state.recipeList.recipe.map((ITEMS) => <li>{ITEMS}</li>)

Alright, you need to understand couple of things.

recipe is an array and is not an object. So you can’t use recipeList.recipe. Therefore using map on this won’t work. But what you can do is use ITEMS.recipe to access each recipe in the array.

Also, you are assigning li items to ITEMS const. If you want to do this you would do that before return statement in render function. Then render your const variable inside ul tags.

1 Like

Ok, So if I cant use map then what am I suppose to use with ITEMS.recipe. This will all come before where my comment is in the initial code right before return, and already have a list waiting for items

You can use map, but you need to make sure you calling it on an array. If you want to display each recipe name located in each object of the recipeList array, then you need to call map on this.state.recipeList and then access the recipe property’s value of each object like:

const ITEMS = this.state.recipeList.map(({recipe}) => <li>{recipe}</li>)

Notice I used destructuring to get the recipe property. If I did not use destructuring, I would have to write it as:

const ITEMS = this.state.recipeList.map(recipeObj => <li>{recipeObj.recipe}</li>)

Personally, I would rename recipeList to recipes and inside each object, I would rename recipe to name, so when I write either of the following, they are more readable:

const ITEMS = this.state.recipes.map(({name}) => <li>{name}</li>)

OR

const ITEMS = this.state.recipes.map(recipe => <li>{recipe.name}</li>)
1 Like

Now I see what @shimphillip was saying! Map would not have worked because I was using recipeList.recipe which is not an array. Got to make a note and star it to remind myself. Thank you @shimphillip and @camperextraordinaire.