forms - Custom contents <td> in ReactJS

Question

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>
  )
})}

question from:https://stackoverflow.com/questions/65557491/custom-contents-td-in-reactjs

Answer 1

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>