How to add if statement in the map function using react

Question

Hi guys I'm trying to filter out the first iteration of the map function because its undefined and I don't want it to show,

the code is this:

  const data = this.state.arr.map((r, index) => (
      <tr key={index}>
        <th>{index}</th>
        <th>{r.formName}</th>
        <th>{this.state.numofSub} </th>
        <th>
          <Link to={`/submitPage/${r._id}`}>Submit PageLink</Link>
        </th>
        <th>
          <Link to={`/submissionPage/${r._id}`}>Submission page Link </Link>
        </th>
      </tr>
    ));

I tried adding if statement before the render like so:

  const data = this.state.arr.map((r, index) => (
  if(r._id){
      <tr key={index}>
        <th>{index}</th>
        <th>{r.formName}</th>
        <th>{this.state.numofSub} </th>
        <th>
          <Link to={`/submitPage/${r._id}`}>Submit PageLink</Link>
        </th>
        <th>
          <Link to={`/submissionPage/${r._id}`}>Submission page Link </Link>
        </th>
      </tr>
    )}
else return NULL
);

but it won't compile, can someone tell me how is the proper way to do this? to be clear I just want to check that the r._id has something in it, if it doesn't then I don't want it to show.

Sagiv b.g · Accepted Answer · 2018-09-23 12:28:32Z

2

Your map function doesn't have a body (curly braces) {}.
And you forgot a return after the if statement.

 const data = this.state.arr.map((r, index) => {
  if(r._id){
    return(
      <tr key={index}>
        <th>{index}</th>
        <th>{r.formName}</th>
        <th>{this.state.numofSub} </th>
        <th>
          <Link to={`/submitPage/${r._id}`}>Submit PageLink</Link>
        </th>
        <th>
          <Link to={`/submissionPage/${r._id}`}>Submission page Link </Link>
        </th>
      </tr>
    )
   }
    else return null
})

Note that this will return an array with null in it. If you need to filter then chain filter before the map

edited Sep 23, 2018 at 12:28

answered Sep 23, 2018 at 12:04

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

3 Comments

Alexander Over a year ago

this code wont compile, I even tried copying and same error.

Sagiv b.g Over a year ago

@AlexAlex i had a missing closing ) in the end. Edited

Hemadri Dasari Over a year ago

{ brackets are not mandatory. map works even with (. return is required when we use { brackets and return isn't required when we use ( bracket

Hemadri Dasari · Accepted Answer · 2018-09-23 12:33:13Z

0

You can use ternary operator and render JSX elements directly in render using .map

render(){
 const { arr, numofSub } = this.state;
 return(
    {arr && arr.map((r, index) => (
      {r._id ? (
      <tr key={`${r.formName}-${index}`}>
       <th>{index}</th>
       <th>{r.formName}</th>
       <th>{numofSub} </th>
       <th>
        <Link to={`/submitPage/${r._id}`}>Submit PageLink</Link>
      </th>
      <th>
         <Link to={`/submissionPage/${r._id}`}>Submission page Link </Link>
      </th>
    </tr>) : null}
))})
}

answered Sep 23, 2018 at 12:33

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Comments

J.Lindebro · Accepted Answer · 2018-09-24 00:38:24Z

0

I think the Array.prototype.filter() method is quite effective to resolve issues like this. Something like this:

const filteredData = this.state.arr.filter(item => item.id !== undefined)
const data = filteredData.map((r, index) => (
  ...
)

No if statement needed with this setup.

answered Sep 24, 2018 at 0:38

J.Lindebro

2233 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to add if statement in the map function using react

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related