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

Question

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

Answer 1

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>