Render list with React-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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>