Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

229
Visualizações
How to eliminate empty node with loop inside React JSX

how right to filter data from an object and then render it? I found a suitable working solution, but the problem is that I have to return an empty node, otherwise I will get an error: ``` Array.prototype.map() expects a value to be returned at the end of arrow function:

const movieRows = Object.entries(movieObject).map(([key, value], id) => {
  if (
    key === "Actors" ||
    key === "Director" ||
    key === "Country" ||
    key === "Runtime"
  ) {
    return (
      <tr key={id}>
        <td className="title">{`${key}:`}</td>
        <td className="value">{`${value}`}</td>
      </tr>
    );
  } else {
    // this
    return <></>;
  }
});

Even that is not quite good, because I get a message to the console that it is necessary to add a key.

So I'm returning an unnecessarily empty node, just to satisfy React.

else {
    return <tr key={id}></tr>;
  }

Is there any way to write this without an unnecessary node?

Thanks

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Thanks to Nick, the solution is:

const movieRows = Object.entries(movieObject)
    .filter(
      ([key]) =>
        key === "Actors" ||
        key === "Director" ||
        key === "Country" ||
        key === "Runtime"
    )
    .map(([key, value], id) => {
      return (
        <tr key={id}>
          <td className="movie-subtitle">{`${key}:`}</td>
          <td>{`${value}`}</td>
        </tr>
      );
    });
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda