Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

222
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!