renderItems dont have items

Question

I want to make a function renderItems so it can be inserted into the return but it does not work is displayed in the console undefined if you insert this function into the return all works but I do not want to do so

import React, { useState } from "react";
import { useEffect } from "react";
import PostService from "../../API/PostService";
import Loading from "../loading/Loading";
import "./ItemList.css";

export default function ItemList() {
    const [peopleList, setPeopleList] = useState();
    const [items, setItems] = useState();

    const postService = new PostService();

    useEffect(() => {
        postService.getAllPeople().then((peopleList) => {
            setPeopleList(peopleList);
        });
    }, []);

    const renderItems = (arr) => {
        arr.map(({ id, name }) => {
            return (
                <li className="list-group-item" key={id}>
                    {name}
                </li>
            );
        });
    };

    return (
        <div>
            {!peopleList ? (
                <Loading />
            ) : (
                <ul className="item-list list-group">
                    {console.log(renderItems(peopleList))}
                </ul>
            )}
        </div>
    );
}

`renderItems` does not return anything. do `return arr.map(({ i ....` — Aᴍɪʀ, Jan 28 '23 at 08:39

score 1 · Accepted Answer · answered Jan 28 '23 at 08:39

you just have to return from renderItems

const renderItems = (arr) => {
       return arr.map(({ id, name }) => {
            return (
                <li className="list-group-item" key={id}>
                    {name}
                </li>
            );
        });
    };

renderItems dont have items

1 Answers1