CODEWITHSUNDEEP
reactjsforms
spaceMan
spaceMan

Reputation: 29

Custom contents <td> in ReactJS

The prop student.gender returns 0 or 1 from Api, I want to custom it will be come either <i class="fas fa-male"></i> with 1 or <i class="fas fa-female"></i> with 0. How can I do it? Below is my code:

{students.map((student, idx) => {
  return (
    <tr key={student.id}>
      <td>{idx + 1}</td>
      <td>{student.stuId}</td>
      <td>{student.firstName}</td>
      <td>{student.lastName}</td>
      <td>{student.gender}</td>
      <td>{student.phone}</td>
      <td>{student.email}</td>
      <td>{student.majorId}</td>
      <td>
        <a href="#" onClick={() => handleModalShow(null, student.id)}>
          <i className="fas fa-edit text-primary"></i>
        </a>
        <a href="#" onClick={() => deleteStudent(null, student.id)}>
          <i className="fas fa-trash-alt text-danger"></i>
        </a>
      </td>
    </tr>
  )
})}

Upvotes: 0

Views: 29

Answers (2)

user2793857
user2793857

Reputation: 40

You can use the ternary operator

{ student.gender==1?<i class="fas fa-male"></i> : <i class="fas fa-female"></i>
}

This will select the image that you want based the results of the comparison.

You can also determine the image you want before the return statement:

 var genderimage=student.gender==1?<i class="fas fa-male"></i> : <i class="fas fa-female"></i>
   return ( ...<td> {genderimage}</td>)

Upvotes: 0

Mark Skelton
Mark Skelton

Reputation: 3891

You can use the ternary operator to create the class name from the student.gender prop.

<td>
  <i className={`fas fa-${student.gender === 1 ? 'male' : 'female'}`}></i>
</td>

Upvotes: 1

Related Questions