Render list with React

Question

I am trying to render a dynamic list but inside the jsx rendered, I can't display any item this is my code, I've also tried with useState const [orderList, setOrderList] = useState([]) and setOrderList(prev => [...prev, childData]) but it returns me an empty array so I've opted for the classic javascript way but it won't work, it also won't console log the data inside the render

const OrdiniModuloVideoAds = () => {
    let orderList = [];

    const ordiniRef = ref(realtimeDatabase, "ordinazioneVideoAds/modulo/ordini");

    useEffect(() => {
        onValue(ordiniRef, (snapshot) => {
            snapshot.forEach((childSnapshot) => {
                const childData = childSnapshot.val();
                orderList.push(childData);
            });
            console.log(orderList);
        });
    }, []);

    return (
        <StyledOrdiniModuloVideoAds>
            <div className='ordiniWrapper'>
                {orderList.map((i) => {
                    return (
                        <span>{i.mail}</span>
                    );
                })}
            </div>
        </StyledOrdiniModuloVideoAds>
    );
};

EDIT This is the snippet with the useState:

const OrdiniModuloVideoAds = () => {
    const [orderList, setOrderList] = useState([])

    const ordiniRef = ref(realtimeDatabase, "ordinazioneVideoAds/modulo/ordini");

    useEffect(() => {
        onValue(ordiniRef, (snapshot) => {
            snapshot.forEach((childSnapshot) => {
                const childData = childSnapshot.val();
                setOrderList((prev) => [...prev, childData])
            });
            console.log(orderList);
        });
    }, []);

    return (
        <StyledOrdiniModuloVideoAds>
            <div className='ordiniWrapper'>
                {orderList.map((i) => {
                    return (
                        <span>{i.mail}</span>
                    );
                })}
            </div>
        </StyledOrdiniModuloVideoAds>
    );
};

The data is actually added because it logs to me the array on the useEffect Any suggestion?

can you show us the implementation that you have done with useState? — Mirza Umair
– Mirza Umair, Commented Sep 3, 2022 at 9:03
Bro, you can't render your list with a standard javascript! Let me create a solution try that code and let me know if that code works for you or not. — Abdullah Khan
– Abdullah Khan, Commented Sep 3, 2022 at 10:07

Ploppy · Accepted Answer · 2022-09-03 09:03:58Z

1

This is because your map callback does not return anything:

<div className='ordiniWrapper'>
  {array.map((i) => {
    return (
     <span>{i.mail}</span>
    );
  })}
</div>

Or the short version:

<div className='ordiniWrapper'>
  {array.map((i) => (
    <span>{i.mail}</span>
  ))}
</div>

answered Sep 3, 2022 at 9:03

Ploppy

15.4k6 gold badges44 silver badges62 bronze badges

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

2 Comments

Mirza Umair Over a year ago

You are right. But I don't think updating the array directly by its ref is a good practice. He should use useState instead.

alch_coder Over a year ago

Sorry I've forgot to add it, it also doesn't work with the return

Abdullah Khan · Accepted Answer · 2022-09-03 10:18:19Z

Try this solution hopefully it will fix your issue.


const OrdiniModuloVideoAds = () => {
    const [orderList, setOrderList] = React.useState([]);

    const ordiniRef = ref(realtimeDatabase, "ordinazioneVideoAds/modulo/ordini");

    useEffect(() => {
        onValue(ordiniRef, (snapshot) => {
            snapshot.forEach((childSnapshot) => {
                const childData = childSnapshot.val();
                setOrderList(prev => ([...prev, childData])); /// Order list array is empty because you're not returning the data properly that's why it just gives you the default empty array in the console.
            });
        });
    }, []);

    return (
        <StyledOrdiniModuloVideoAds>
            <div className='ordiniWrapper'>
                {orderList.map((i) => <span key={i.mail}>{i.mail}</span>)}
            </div>
        </StyledOrdiniModuloVideoAds>
    );
};

Collectives™ on Stack Overflow

Render list with React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related