How to map items correctly

user_8377978 0
Viewed 42

I am trying to do an API call and then display that information from the API call. For some reason even though the data is stored, it wont display on the page.

In APP.js I have {results.length != 0 && <Recipe items={results} />} where results is an array full of recipe information. Then I do an API call and store the results in the results state variable using setResults. This is my code for my recipe component

import Nutrients from "./Nutrients";
const Recipe = ({ items }) => {
  return (
    <div>
      Items should be mapped
      {items &&
        items.map((item) => {
          const { id, title, image, nutrition } = item;
          console.log("id " + id);
          const { nutrients } = nutrition;
          console.log(nutrients);
          <p>map</p>;
        })}
    </div>
  );
};
export default Recipe;

My component for recipe displays the "items should be mapped" but it does not display the mapping of the items. Any idea why?

reactjs javascript
1 Answers

When you use map(), you have to return a value :

{items &&
  items.map((item, index) => {
    const { id, title, image, nutrition } = item;
    console.log("id " + id);
    const { nutrients } = nutrition;
    console.log(nutrients);
    return <p key={index}>map</p>; // <---- HERE
  })
}

It worked for me after making this change

user_162828980
Related