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 >
          <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"));

CodePudding user response：

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