ReactJS Conditional Rendering - else if doesn't work

Question

I'm in the stage of learning JS and React and I'm not sure why else if doesn't work in the code below. Anyone can help me?

  function Item({ name, isPacked }) {
  if (isPacked) {
    return (
      <li className="item">
        {name} {isPacked && " ✔"}
      </li>
    );
  } else if (!isPacked) {
    return (
      <li className="item">
        {name} {isPacked && " ❌"}
      </li>
    );
  }
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item isPacked={true} name="Space suit" />
        <Item isPacked={true} name="Helmet with a golden leaf" />
        <Item isPacked={false} name="Photo of Tam" />
      </ul>
    </section>
  );
}

What isn't working? Also, using {isPacked && " ❌"} when you just checked !isPacked means it will never be displayed. — Spectric
– Spectric, Commented Aug 23, 2022 at 15:27
Please provide some more info. What exactly isn't working? Are there any errors? etc.. — tomleb
– tomleb, Commented Aug 23, 2022 at 15:27
You don't need an if/else there. You can use a ternary statement in one line: {name} {isPacked ? '✔' : '❌'} — Andy
– Andy, Commented Aug 23, 2022 at 15:32
@Spectric yes I can use logical AND and maybe ternary operator but I wanted to test with IF-Else if. Im not getting any error message I'm just expecting in the third component <Item> to get X next to the text. — Norby
– Norby, Commented Aug 23, 2022 at 15:33
You won't get an error because the code works - it just doesn't work the way you want it to. Remove the isPacked checks from within the if/else as Spectric pointed out - you've already made them. PS - I said you don't need it, not that you can't use it. — Andy
– Andy, Commented Aug 23, 2022 at 15:35

ilketorun · Accepted Answer · 2023-03-07 09:17:24Z

2

Try like this:

function Item({ name, isPacked }) {
    return (
        <li className="item">
            {name} {isPacked ? '✔' : '❌'}
        </li>
    );
}

edited Mar 7, 2023 at 9:17

answered Aug 23, 2022 at 15:39

ilketorun

4347 silver badges17 bronze badges

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

4 Comments

Andy Over a year ago

There's no need for the template string here.

ilketorun Over a year ago

What is the alternative could you share please

Andy Over a year ago

See my previous comment, or the other answer.

ilketorun Over a year ago

I just checked it, thank you for information.

Ala Yacoub99 · Accepted Answer · 2022-08-23 15:48:24Z

0

you actually tested if the isPacked true or false so try this code:

function Item({ name, isPacked }) {
    return (
      <li className="item">
        {name}  {isPacked ? "✔" : "❌" }
      </li>
    );
}

{isPacked ? "✔" : "❌" } so this line of code is equal to:

  if(isPacked == true){
      return "✔";
    }else{
      return "❌";
    }

You can get some helpful examples Here https://reactjs.org/docs/conditional-rendering.html.

edited Aug 23, 2022 at 15:48

answered Aug 23, 2022 at 15:46

Ala Yacoub99

12 bronze badges

Collectives™ on Stack Overflow

ReactJS Conditional Rendering - else if doesn't work

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related