Content not displayed despite present data - React

Question

Could you tell me why my offer content is always empty ?

The "toto" is not displayed and my data are displayed because of the line "console.log(offers").

const ListProduct = (offers : any) => {

    console.log(offers);

     const offersDisplay = offers ? (
         <div>
             { () => {
                    console.log("test");
                    offers.map((shop :any) => {
                        shop.offers.map((offer:any) => {
                            return(
                                <div className="card border-secondary mb-3 listMaxWidth">
                                    <div className="card-header">{shop.name}</div>
                                    <div className="card-body">
                                        <img src={offer.picture} className="imgOffer"/>
                                        <h4 className="card-title">{offer.name}</h4>
                                        <p className="card-text">{shop.description}</p>
                                    </div>
                            </div>
                            );
                        });
                    })
                }
            }
        </div>
     ):'toto';
        
    return(
        <div>
            {offersDisplay }
         </div>
    )
}
export default ListProduct;

I tried so many different way to write it, unfortunately can't find the right way ...

Could you help me please ?

Thanks in advance

Answer 1

You don't need to pass a callback function in your code

 const offersDisplay = offers ? (
     <div>
           //this callback
         { () => {

And also you don't return from your first map.

And the last thing is that you need to include the code in your return that way it gets executed every time the offers data is changed.

You need to change your code like this

const ListProduct = (offers : any) => {
    return(
        <div>
            {
                offers && offers.length && offers.map((shop :any) => {
                    return shop.offers.map((offer:any) => {
                        return(
                            <div className="card border-secondary mb-3 listMaxWidth">
                                <div className="card-header">{shop.name}</div>
                                    <div className="card-body">
                                    <img src={offer.picture} className="imgOffer"/>
                                    <h4 className="card-title">{offer.name}</h4>
                                    <p className="card-text">{shop.description}</p>
                                </div>
                            </div>
                        );
                    });
                })
            }  
        </div>
    )
}

export default ListProduct;