0

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: ""}];
5
  • primeiro tem que fazer fora do map! e depois fazer um slice para pular a primeira imagem!
    – novic
    Commented 3/08/2020 às 22:14
  • tem outros erros também, cade seu exemplo do objeto fotos?
    – novic
    Commented 3/08/2020 às 22:16
  • Podes colocar um if (index !== 0) return dentro desse onClick`... mas a sugestão do @VirgilioNovic é mais correta. Pergunta: todas as imagens são clicáveis?
    – Sergio
    Commented 3/08/2020 às 22:22
  • @Sergio, sim, todas são, e devem ser clicáveis Commented 3/08/2020 às 22:31
  • @VirgilioNovic vou tentar o que você mandou aqui ;) Commented 3/08/2020 às 22:32

1 Resposta 1

3

Pelo que pude entender, se quer imprimir a primeira item de um jeito e os outros de outra forma um exemplo de um código bem simples é:

function App() {
  const [tarefas, setTarefas] = React.useState([
    {'id': 1, 'desc': 'Tarefa 1'},
    {'id': 2, 'desc': 'Tarefa 2'},
    {'id': 3, 'desc': 'Tarefa 3'},
    {'id': 4, 'desc': 'Tarefa 4'},
    {'id': 5, 'desc': 'Tarefa 5'},
  ]);
  return (
    <ul>
      {tarefas.length && (<li key={tarefas[0].id}>{tarefas[0].desc}</li>)}
      {tarefas.slice(1).map((t, i) => <li key={i}>{t.id}</li>)}
    </ul>
  )
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

onde essa linha:

{tarefas.length && (<li key={tarefas[0].id}>{tarefas[0].desc}</li>)}

pega a primeira poisção do array e a próxima:

{tarefas.slice(1).map((t, i) => <li key={i}>{t.id}</li>)}

com slice e map pega o restante, acredito ser essa a sua duvida!

{tarefas.slice(1).map((t, i) => <li key={i}>{t.id}</li>)}

a documentação slice.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .