Eu tenho uma função map do JavaScript onde eu retorno todas as fotos de um certo registro. Dentre essas fotos, uma delas tem que receber um texto, que no meu caso é Foto principal, que sempre será o primeiro elemento do array. A dúvida é que o texto sempre vai para todas as imagens, e não faço ideia de como colocar o texto apenas na primeira foto.
Segue abaixo o código em questão.
<ul>
{fotoApi?.fotos?.map((foto, index) => (
<li key={index} style={{ listStyle: "none" }}>
<img
style={cssListImg}
src={fotoApi.fotos[index]}
onClick={() => {
setFile(fotoApi.fotos[index]);
setImg(null);
setI(index);
setImgSel(foto);
}}
/>
<br />
{/* fotoApi.fotos[0] ? <>Foto principal</> : <>""</> */}
{/* A linha acima é o que eu tentei, mas sem sucesso */}
</li>
))}
</ul>
Como solicitado por @VirgilioNovic, meu "fotos" é criado da seguinte forma:
const [fotoApi, setFotoApi] = useState({fotos: [], caminhoimagem: ""}];
map
! e depois fazer umslice
para pular a primeira imagem!if (index !== 0) return dentro desse
onClick`... mas a sugestão do @VirgilioNovic é mais correta. Pergunta: todas as imagens são clicáveis?