If else condition while maping through object json in react

Question

Using the if else condition to show the student details and want to display some value for example "data not available" when the student is null

import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row, Col } from "react-flexbox-grid";
import studentData from "./studentData.json";

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Student Details</h1>

        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Student Nme</th>
              <th scope="col">Roll No</th>
              <th scope="col">Obtained Marks</th>
            </tr>
          </thead>
          {studentData?.map((studentDetails, index) => {
            console.log(studentDetails)
            return (
              <tbody>
                <tr>
                  <th scope="row">{index}</th>
                  <td>
                   {studentDetails.student?.STNAME:"Data Not Available"}
                  </td>
                  <td>
                  {studentDetails.student?.ROLLNO}
                  </td>
                  <td>{studentDetails.MREMARKS}</td>
                </tr>
              </tbody>
            );
          })}
        </table>
      </div>
    );
  }
}

    

ReactDOM.render(, document.getElementById("contenter code hereainer"));

Answer 1

Use ternary operator

{studentData?.map((studentDetails, index) => {
            console.log(studentDetails)
            return (
              <tbody>
                <tr>
                  <th scope="row">{index}</th>
                  <td>
                   {studentDetails.student ? studentDetails.student.STNAME : Data not available}
                  </td>
                  <td>
                  {studentDetails.student?.ROLLNO}
                  </td>
                  <td>{studentDetails.MREMARKS}</td>
                </tr>
              </tbody>
            );
  })}