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

Question

I'm currently learning if else statement in React,

So i want the button in the table to appear if the variable "step" is set to 1, other than that the button (and the row) wont appear. What method is the best to implement this if else?

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

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

Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — devserkan, Jul 23 '20 at 12:09

score 2 · Answer 1 · answered Jul 23 '20 at 12:09

2

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>

answered Jul 23 '20 at 12:09

Ali Abu Hijleh

492
3
9

Thanks! is the ```' : null'``` in the code the ```else``` case? – Buffaurus Jul 23 '20 at 15:39
1

yes, this is called a ternary operator, which acts like if / else – Ali Abu Hijleh Jul 24 '20 at 15:11

score 1 · Answer 2 · answered Jul 23 '20 at 12:21

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.

Glad to know that. Mark it as answered if you feel it helped so others can benefit from this as well. @Buffaurus — Tarik1322, Jul 24 '20 at 06:10

Y Allaban · Answer 3 · 2020-07-23T12:18:45.940

0

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

edited Jul 23 '20 at 12:18

answered Jul 23 '20 at 12:11

Y Allaban

112
1
1
8

thanks! this one (if and only if condition) is new to me and i think this is the more elegant solution – Buffaurus Jul 23 '20 at 15:41

score 0 · Answer 4 · answered Jul 23 '20 at 12:16

0

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

answered Jul 23 '20 at 12:16

Virgile Junique

83
8

Yes you can. check out the first comment. – Y Allaban Jul 23 '20 at 12:22

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

4 Answers4