ReactJs: How to handle empty array with map function inside render method

Question

I m trying to print table with some JSON data, but I am not able to render empty array when I am using map method.

JSON DATA :

    [{
	"id": 6,
	"firstname": "Sharon",
	"lastname": "Jenkins",
	"specialties": []
}, {
	"id": 2,
	"firstname": "Helen",
	"lastname": "Leary",
	"specialties": [{
		"id": 1,
		"name": "radiology"
	}]
}, {
	"id": 4,
	"firstname": "Rafael",
	"lastname": "Ortega",
	"specialties": [{
		"id": 2,
		"name": "surgery"
	}]
}, {
	"id": 5,
	"firstname": "Henry",
	"lastname": "Stevens",
	"specialties": [{
		"id": 1,
		"name": "radiology"
	}]
}]

My Code :

 {this.state.vets.map(vet =><tr><td>{vet.firstname}</td>
                  {  
                                  
                  vet.specialties.map((subitem,i) => {
                       
                    return <td>{subitem.name}</td> })}<td>EDIT</td><td id={vet.firstname}><div class="funkyradio">

Now I am getting the following error

As Sharon doesn't have a specialist, I need to print as N/A.

How can I check the specialities are empty and print N/A.

This is happening because the specialities array of your first object is empty so the second map function does not iterate over that field. — Atin Singh
– Atin Singh, Commented Feb 26, 2019 at 7:53

sathish kumar · Accepted Answer · 2019-02-26 07:52:53Z

2

use conditional statment like this

{ this.state.vets.length > 0 
 ? this.state.vets.map(()=>Your logic)
 : <Your custom message/>
}

answered Feb 26, 2019 at 7:52

sathish kumar

1,5171 gold badge12 silver badges19 bronze badges

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

Comments

Cespejo · Accepted Answer · 2019-02-26 07:55:02Z

1

try rendering always the TD tag, like:

{
  this.state.vets.map(vet =>
    <tr>
      <td>{vet.firstname}</td>
        <td>                
          {vet.specialties.map((subitem,i) => {
            return <span>{subitem.name}</span>
          })}
        </td>
        <td>EDIT</td>
        <td id={vet.firstname}>
          <div class="funkyradio">

answered Feb 26, 2019 at 7:55

Cespejo

4142 silver badges11 bronze badges

Comments

Varun Suresh Kumar · Accepted Answer · 2019-02-26 08:09:31Z

1

<table>
        {dataJSON.map(({ id, firstname, lastname, specialties }) => {
          return (
            <tr>
              <td> {`${firstname} ${lastname}`} </td>
              <td> {specialties.map(specialty => specialty.name).join(",")} </td>
              <td> <span> EDIT </span> </td>
            </tr>
          );
        })}
</table>

answered Feb 26, 2019 at 8:09

Varun Suresh Kumar

8791 gold badge7 silver badges16 bronze badges

Comments

Ivan Dzhurov · Accepted Answer · 2019-02-26 07:54:50Z

0

Mainly for readability, instead of using the object property, I would create a separate function that will return the specialties, if any, otherwise N/A

answered Feb 26, 2019 at 7:54

Ivan Dzhurov

1976 bronze badges

Collectives™ on Stack Overflow

ReactJs: How to handle empty array with map function inside render method

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related