How to iterate through data and display them in JSX in ReactJS?

Question

I have a function that makes a call to the server and retrieves data in a form of array of json objects, what i want is to iterate through the data and display them in the JSX .

Thw Problem is No thing is being displayed on the screen, not even getting an error. and when I console.log the response i got this:

below is the component

import React from 'react';
import axios from 'axios';

function Supplier(){

    let suppliers_list=[];

    React.useEffect(() => {
        getAllSuppliers();
    });


    const getAllSuppliers = () =>{
        return axios.get('http://localhost:4000/supplier',supplierData).then(
            response=>{
                let allSuppliers = response.data;

                allSuppliers.forEach(element => {
                    suppliers_list.push(
                    <li>{element.supplier_name}</li>
                    );
                });

            },error =>{
                //handle error
            }
        );
    }


    return(
        <div>
            <ul>
                {suppliers_list}
            </ul>
        </div>
    )
}
export default Supplier;

and when I console.log the suppliers_list I got this:

You should be using the useState hook for your suppliers_list. Declaring it as a var means it is not reactive so your component will ignore changes to it. — Chase DeAnda
– Chase DeAnda, Commented Jan 27, 2020 at 22:56
@ChaseDeAnda I am new to Reactjs please can you answer it? i tried to use useState but i got error Objects are not valid as a React child — Ali
– Ali, Commented Jan 27, 2020 at 23:03

Gangadhar Gandi · Accepted Answer · 2020-01-27 23:11:04Z

Change your code like below,

import React from 'react';
import axios from 'axios';

function Supplier(){

    const [suppliersList, setSuppliersList] = React.useState([]);

    React.useEffect(() => {
        getAllSuppliers();
    }, []); // Hoping you want to execute getAllSuppliers function only once, so [] empty square braces 


    const getAllSuppliers = () =>{
        return axios.get('http://localhost:4000/supplier', supplierData).then(
            response=>{
                setSuppliersList(response.data);
            },error =>{
                //handle error
            }
        );
    }


    return(
        <div>
            <ul>
                {suppliersList.map(supplierObject => {
                return <li>{supplierObject.supplier_name}</li>
                })}
            </ul>
        </div>
    )
}
export default Supplier;

Collectives™ on Stack Overflow

How to iterate through data and display them in JSX in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related