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 — devserkan
– devserkan, Commented Jul 23, 2020 at 12:09

Ali Abu Hijleh · Accepted Answer · 2020-07-23 12:09:58Z

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, 2020 at 12:09

Ali Abu Hijleh

5023 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Buffaurus Over a year ago

Thanks! is the ' : null' in the code the else case?

Ali Abu Hijleh Over a year ago

yes, this is called a ternary operator, which acts like if / else

Tarik1322 · Accepted Answer · 2020-07-23 12:21:37Z

1

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.

answered Jul 23, 2020 at 12:21

Tarik1322

908 bronze badges

2 Comments

Buffaurus Over a year ago

tried both your solution and can confirm both works!

Tarik1322 Over a year ago

Glad to know that. Mark it as answered if you feel it helped so others can benefit from this as well. @Buffaurus

Virgile Junique · Accepted Answer · 2020-07-23 12:16:52Z

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, 2020 at 12:16

Virgile Junique

839 bronze badges

1 Comment

Y Allaban Over a year ago

Yes you can. check out the first comment.

Y Allaban · Accepted Answer · 2020-07-23 12:18:45Z

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, 2020 at 12:18

answered Jul 23, 2020 at 12:11

Y Allaban

1121 gold badge1 silver badge8 bronze badges

1 Comment

Buffaurus Over a year ago

thanks! this one (if and only if condition) is new to me and i think this is the more elegant solution

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related