How to set if-else statement in a React function Return()?

If I understood your question correctly there is two way we can do it (Known to me).

function DeletableGroupRow({
  student,
  hasDeleteButton = false,
  onDeleteStudent,
  step,
}) {
  DeletableGroupRow.propTypes = {
    student: PropTypes.object.isRequired,
    hasDeleteButton: PropTypes.bool,
    onDeleteStudent: PropTypes.func.isRequired,
  };
  const handleDeleteClick = () => {
    onDeleteStudent(student.id);
  };

  if (step === 1) {
  return (
    <tr>
      <td>{student.nim}</td>
      <td>{student.name}</td>
      <td>{student.class}</td>
      <td>{student.peminatan.abbrev}</td>
      // if the variable "step" is set to 1 then this td appears
      <td>
        <button
          type="button"
          className="btn btn-default"
          onClick={handleDeleteClick}
          disabled={!hasDeleteButton}
        >
          Hapus
        </button>
      </td>
      //
    </tr>
  );
}
} else {
 return </>
}

OR

return (
  { step === 1 && <tr>...</tr> }
  { step === 0 && </>}
);

</> may or may not be needed, people with sound expertise in react may correct this.

you can't use if / else statement inside the return i think. You have two possibity, ternary inside rendering like this

 { 
       step === 1 &&
  <td>
          <button type="button" 
          className="btn btn-default" 
          onClick={handleDeleteClick} 
          disabled={!hasDeleteButton}>
            {'Hapus'}
          </button> 
           
 </td>
}

Or a sub component like here

you can use && operator which mean if and only if is true. It is a shorthand to if-else but simpler and readable. But if you want render something else if your condition is false then use if-else.

{step === 1 && (
 <td>
    <button
      type="button"
      className="btn btn-default"
      onClick={handleDeleteClick}
      disabled={!hasDeleteButton}
    >
      Hapus
    </button>
  </td>
 )}

here's how to do a conditional rendering

<td>
 { step === 1 ? 
    <button type="button" 
    className="btn btn-default" 
    onClick={handleDeleteClick} 
    disabled={!hasDeleteButton}>Hapus</button> 
    : null 
 }
            
</td>