How to extract the logic part from map function to other self created functions. Keeping the map() logic into separate part

Question

"As in this i have to separate logic from map() and put it into a function and then call it"

<tbody>
      {studentDatas.map((data) => {
        if (
          data.hindi < 35 ||
          data.english < 35 ||
          data.math < 35 ||
          data.science < 35
        ) {
          return (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.hindi}</td>
              <td>{data.english}</td>
              <td>{data.math}</td>
              <td>{data.science}</td>
              <td>Need to study more</td>
              <td>Fail</td>
            </tr>
          );
        }
        if (data.hindi + data.english + data.math + data.science < 250) {
          return (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.hindi}</td>
              <td>{data.english}</td>
              <td>{data.math}</td>
              <td>{data.science}</td>
              <td>Need to work hard</td>
              <td>Pass</td>
            </tr>
          );
        }
        if (data.hindi + data.english + data.math + data.science < 300) {
          return (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.hindi}</td>
              <td>{data.english}</td>
              <td>{data.math}</td>
              <td>{data.science}</td>
              <td>Good</td>
              <td>Pass</td>
            </tr>
          );
        }
        if (data.hindi + data.english + data.math + data.science <= 400) {
          return (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.hindi}</td>
              <td>{data.english}</td>
              <td>{data.math}</td>
              <td>{data.science}</td>
              <td>Excellent</td>
              <td>Pass</td>
            </tr>
          );
        }
      })}
    </tbody>

"JSON DATA" export const studentDatas = [ { id: 1, name: "Student1", hindi: 10, english: 10, math: 20, science: 25, }, { id: 2, name: "Student2", hindi: 40, english: 80, math: 0, science: 0, }, { id: 3, name: "Student3", hindi: 70, english: 80, math: 80, science: 90, }, { id: 4, name: "Student4", hindi: 20, english: 45, math: 50, science: 70, }, { id: 5, name: "Student5", hindi: 40, english: 50, math: 70, science: 90, }, { id: 6, name: "Student6", hindi: 28, english: 70, math: 80, science: 10, }, { id: 7, name: "Student7", hindi: 16, english: 50, math: 50, science: 10, }, { id: 8, name: "Student8", hindi: 78, english: 50, math: 50, science: 50, }, { id: 9, name: "Student9", hindi: 100, english: 100, math: 100, science: 100, }, ];

Answer 1

try this

   const getTotalMarks = (data) => {
    return data.hindi + data.english + data.math + data.science;
  }

and in map loop

<tbody>
    {studentDatas.map((data) => {
      const isFail = data.hindi < 35 || data.english < 35 || data.math < 35 || data.science < 35;
      const total = !isFail && getTotalMarks(data);
      return (
        <tr key={data.id}>
          <td>{data.id}</td>
          <td>{data.name}</td>
          <td>{data.hindi}</td>
          <td>{data.english}</td>
          <td>{data.math}</td>
          <td>{data.science}</td>
          {
            isFail ?
              <>
                <td>Need to study more</td>
                <td>Fail</td>
              </>
              : <>
                {
                  total < 250 ? <td>Need to study more</td>
                    : total < 300 ? <td>Good</td> : <td>Excellent</td>
                }
                <td>Fail</td>
              </>
          }
        </tr>
      );
    })}
  </tbody>