React loop data from array in render

Question

For some reason, I can't get .map() to render the data. I tried running the function directly in render and called it from render and nothing happened.

function Contracts(props) {
    const [isLoaded, setLoaded] = useState(true);
    const [error, setError] = useState(null);
    const [equipment, setEquipment] = useState([]);




    useEffect(() => {
        const getContracts = async () => {
            let snapshot = await db.getAllContracts();
            setTimeout(10000);
            if (snapshot) {
                console.log(snapshot);
                setError(null);
                setLoaded(true);
                snapshot.forEach((item, i) => {
                    console.log(item[1]);
                    equipment.push({
                        value: item, date: item.Dato, status: item.Status,
                        start: item.StartLocation, end: item.EndLocation,
                        col: item.Collateral, reward: item.Reward

                    });
                })
                console.log(equipment);

            } else {
                setLoaded(false);
            }
        }
        getContracts();

    }, [])

    const handleClick = (e) => {
        let target = e.target;
        let selectedEquipmentIndex = target.parentElement.getAttribute("dataset-id");
        this.setState({
            selectedEquipment: selectedEquipmentIndex
        });
    }

    const renderItems = () => {
        const data = equipment;
        console.log(data);
        const listItems = data.map(
            (element) => {
                console.log(element);
                return (
                    <id className="row" key={element} dataset-id={element} onClick={handleClick}>
                        <p className="date">{element.date.toString()}</p>
                        <p className="status">{element.status}</p>
                        <p className="start">{element.start}</p>
                        <p className="end">{element.end}</p>
                        <p className="col">{element.col}</p>
                        <p className="reward">{element.reward}</p>
                    </id>
                )
            }
        )
        return (
            <div>
                {listItems}
            </div>
        )
    }



    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return <div>Loading...</div>;
    } else {
        return (
            <article id="header">
                <article id="content">
                    <section class="container">
                        <div classname="header"><h1></h1></div>
                        <div className="titleArea">
                            <div className="eqnavn"><h1>Date: </h1></div>
                            <div className="eqstatus"><h1>Status: </h1></div>
                            <div className="eqstart"><h1>Start: </h1></div>
                            <div className="eqend"><h1>End: </h1></div>
                            <div className="eqcol"><h1>Collateral: </h1></div>
                            <div className="eqreward"><h1>Reward: </h1></div>
                        </div>
                        {renderItems}

                    </section>
                </article>
            </article>
        )
    }
}

export default Contracts;

And I do get data from my database:

    [{…}]
0: 
col: "270000"
date: 1666454928600
end: "asdas"
reward: 49705
start: "asdasd"
status: "Not Taken"
value: {EndLocation: 'asdas', Size: 'Max 40T Space Safe', StartLocation: 'asdasd', Collateral: '270000', Username: 'Saphyron', …}

I hope someone can help me cause I'm getting stuck. Tried following some of the guides here but most is 5+ years old and does not work sadly.

Don't mutate the state create a copy and then use state setter to update state ... — KcH
– KcH, Commented Oct 22, 2022 at 17:25

Konrad · Accepted Answer · 2022-10-22 17:30:19Z

1

You have to use the functions you've declared

{renderItems()}

instead of

{renderItems}

answered Oct 22, 2022 at 17:30

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Selena Over a year ago

Thanks that worked, now I just need to CSS format it.

ChanHyeok-Im · Accepted Answer · 2022-10-22 17:27:32Z

If you want to update the data of equipment state, you have to call the setEquipment function. ( Do not update directly.)

useEffect(() => {
    const getContracts = async () => {
        let snapshot = await db.getAllContracts();
        setTimeout(10000);
        if (snapshot) {
            console.log(snapshot);
            const _equipment = [];    // <- here
            setError(null);
            setLoaded(true);
            snapshot.forEach((item, i) => {
                console.log(item[1]);
                _equipment.push({    // <- here
                    value: item, date: item.Dato, status: item.Status,
                    start: item.StartLocation, end: item.EndLocation,
                    col: item.Collateral, reward: item.Reward
                });
            })
            console.log(equipment);
            setEquipment(_equipment);    // <- here
        } else {
            setLoaded(false);
        }
    }
    getContracts();
}, []);

KcH · Accepted Answer · 2022-10-22 17:28:52Z

1

You can use the map method instead of forEach here to create an array and update state accordingly as

const eqData = snapshot.map((item, i) => {
    equipment.push({
        value: item, date: item.Dato, status: item.Status,
        start: item.StartLocation, end: item.EndLocation,
        col: item.Collateral, reward: item.Reward

    });
})
setEquipment(eqData)

answered Oct 22, 2022 at 17:28

KcH

3,5224 gold badges28 silver badges61 bronze badges

Comments

Asif Jalil · Accepted Answer · 2022-10-22 17:29:35Z

1

You are trying to push data in equipment. But you can not modify state like this. States are not mutable . So you have to update your state with setState function. I am just rewrite the problematic part.

snapshot.forEach((item, i) => {
     console.log(item[1]);
     const newItem = {
          value: item, date: item.Dato, status: item.Status,
          start: item.StartLocation, end: item.EndLocation,
          col: item.Collateral, reward: item.Reward

     };

     setEquipment([...equipment, newItem])
 })

answered Oct 22, 2022 at 17:29

Asif Jalil

8021 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

React loop data from array in render

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related