const nftData = [ { id: 1, name: "SharDog Raffles", image: dog, nft: [ { title: "SharDog Raffle", name: "META-TK #1", status: "open", unit: 2, image: first, }, { title: "SharDog Raffle", name: "META-TK #2", status: "open", unit: 2, image: second, }, { title: "SharDog Raffle", name: "META-TK #3", status: "open", unit: 2, image: third, }, { title: "SharDog Raffle", name: "META-TK #4", status: "open", unit: 2, image: fourth, }, { title: "SharDog Raffle", name: "META-TK #5", status: "open", unit: 2, image: fifth, }, { title: "SharDog Raffle", name: "META-TK #6", status: "open", unit: 2, image: sixth, }, { title: "SharDog Raffle", name: "META-TK #7", status: "open", unit: 2, image: seventh, }, { title: "SharDog Raffle", name: "META-TK #8", status: "open", unit: 2, image: eight, }, { title: "SharDog Raffle", name: "META-TK #9", status: "close", unit: 2, image: close, }, ], }, { id: 2, name: "NearWeek Raffles", image: dog, nft: [ { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, ], }, { id: 3, name: "Community Rafflest", image: dog, nft: [ { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, ], }, { id: 4, name: "El Café Cartel Raffles", image: dog, nft: [ { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, { name: "Default", status: "open", unit: 2, image: defaultnft, }, ], }, ]; const dog = "https://res.cloudinary.com/dfbqtfoxu/image/upload/v1700588098/rafflestore/dog_osurck.jpg"; State.init({ selectedRaffle: "null" }); const handleRaffleClick = (raffleId) => { State.update({ selectedTab: raffleId }); }; const Heading = styled.h1` color: green; text-align: center; font-size: 3em; `; console.log(nftData); return ( <> <div> <Heading>NFT DATA</Heading> </div> <div> <ul> {nftData.map((raffle) => ( <li key={raffle.id}> <button onClick={() => handleRaffleClick(raffle.id)}> {raffle.name} </button> </li> ))} </ul> {selectedRaffle !== null && ( <div> <h2>{nftData[selectedRaffle - 1].name}</h2> <img src={nftData[selectedRaffle - 1].image} alt={nftData[selectedRaffle - 1].name} /> <ul> {nftData[selectedRaffle - 1].nft.map((nft, index) => ( <li key={index}> <img src={nft.image} alt={nft.name} /> <p>{nft.name}</p> <p>Status: {nft.status}</p> <p>Units: {nft.unit}</p> </li> ))} </ul> </div> )} </div> </> );