javascriptreactjsarraysreact-componentreact-class-based-component

Array map method is not showing list in Class Based Component in React


I have Parent component FoodBox.js and it's child component FoodItems.js. I'm trying make a list of food items stored in the parent comp. and using map() method for it but <ul> is showing empty.

Here is FoodBox.js

const FOOD_ITEMS = [
{ id: "01", name: "Pizza" },
{ id: "02", name: "Burger" },
{ id: "03", name: "Sushi" },
{ id: "04", name: "Pasta" },
{ id: "05", name: "Soup" },
{ id: "06", name: "Cake" },
];

class FoodBox extends Component {
constructor() {
    super();
}
render() {
    const foodList = (
        <ul>
            {FOOD_ITEMS.map((item) => {
                <FoodItems key={item.id} name={item.name} />;
            })}
        </ul>
    );
    return (
        <Fragment>
            <div className={classes.searchBox}>
                <input type="search" placeholder="Search food..." />
            </div>
            <div className={classes.foodWrap}>{foodList}</div>
        </Fragment>
    );
}
}

Here is FoodItems.js

class FoodItems extends Component {
render() {
    return <li className={classes.item}>{this.props.name}</li>;
}
}

Solution

  • Your map has brackets {} which expects a return value

    <ul>
         {FOOD_ITEMS.map((item) => {
            return <FoodItems key={item.id} name={item.name} />;
         })}
    </ul>
    

    If you want to return value directly in map. You can remove {} like below

    <ul>
        {FOOD_ITEMS.map((item) => 
            <FoodItems key={item.id} name={item.name} />;
        )}
    </ul>