Issue with rendering React JSX using if conditional inside map

Question

case 1) I am trying to conditionally render using map and a ternary operator. Here I am iterating over an array of objects and then render only first six of them. Trying to achieve the same, but it does not seem like working.

Help would be appreciated

OBJECT

const recentEventsData = [
  { key: "01", text: "AAA", timestamp: "11:52:27:02 02-11-2019" },
  { key: "02", text: "BBB", timestamp: "11:52:29:02 02-11-2019" },
  { key: "03", text: "CCC", timestamp: "11:52:30:02 02-11-2019" }
];

Inside render()

{
  recentEventsData.map((data, index) => {
    {
      index < 6 ? (
        <div key={index}>
          //Want the transformed output here , that is fourth value from object
          <p>{data.text}</p>
          <p>{data.timestamp}</p>
          <hr />
        </div>
      ) : null;
    }
  });
}

Tholle · Accepted Answer · 2019-04-22 11:45:23Z

1

You only need to use {} inside JSX when you want to inject a JavaScript expression, so inside the function given to map there is no need to create a new block.

Since you have given the function a body, you also need to explicitly return the result.

{recentEventsData.map((data, index) => {
  return index < 6 ? (
    <div key={index}>
      <p>{data.text}</p>
      <p>{data.timestamp}</p>
      <hr />
    </div>
  ) : null;
})}

Instead of checking the index and returning null for the rest of the elements, you can instead slice out the elements you are interested in before using map.

{recentEventsData.slice(0, 6).map((data, index) => (
  <div key={index}>
    <p>{data.text}</p>
    <p>{data.timestamp}</p>
    <hr />
  </div>
))}

answered Apr 22, 2019 at 11:45

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Junius L · Accepted Answer · 2019-04-22 11:44:28Z

1

Use splice and remove the inner {} brackets as .map() needs to return values to work.

The splice() method adds/removes items to/from an array, and returns the removed item(s).

{
  recentEventsData.slice(0, 6).map((data, index) => (
        <div key={index}>
          <p>{data.text}</p>
          <p>{data.timestamp}</p>
          <hr />
        </div>
      )
  );
}

answered Apr 22, 2019 at 11:44

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

Comments

karthik · Accepted Answer · 2019-04-22 11:43:51Z

0

You should return the value by using return keyword.

answered Apr 22, 2019 at 11:43

karthik

1591 silver badge12 bronze badges

2 Comments

joy08 Over a year ago

If you could please edit the code snippet, that'd be great

karthik Over a year ago

@velsonjr Welcome

Collectives™ on Stack Overflow

Issue with rendering React JSX using if conditional inside map

OBJECT

Inside render()

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

OBJECT

Inside render()

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related