Writing JSX with JavaScript

Question

const ModalButton = ({ label, mode }) => {
  return (
    <button type="submit">
      {mode == "new" && (
        <FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />) label
      }
    </button>
  );
};

This label is underlined as red in my code editor. Why it won't let me to have JavaScript with JSX?

I'm trying to conditional render an icon if mode is new render this else another one. Label is a prop (string value) I want to have it next to the icon — Mishen Thakshana
– Mishen Thakshana, Commented Sep 6, 2022 at 10:21
At least related: stackoverflow.com/questions/69011851/…, stackoverflow.com/questions/48886726/… — T.J. Crowder
– T.J. Crowder, Commented Sep 6, 2022 at 10:25

T.J. Crowder · Accepted Answer · 2022-09-06 10:36:31Z

3

The second operand of && has to be a single value; right now, you're trying to give it two. To treat the icon and the text node after it as a unit (a single value), you need to wrap them in something, such as a fragment: <>_____</>

const ModalButton = ({ label, mode }) => {
    return (
        <button type="submit">
            {mode == "new" && (
                <>
                    <FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />
                    {label}
                </>
            )}
        </button>
    );
};

(You also had the ) in the wrong place; I've fixed it above. It shouldn't be just after the icon, it should be after the entire operand for && [so with this change, it's after the end of the fragment].)

Also, if you want to use the value of label, you'll need to wrap it in a JSX expression (as above): {label}.

edited Sep 6, 2022 at 10:36

answered Sep 6, 2022 at 10:21

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

3 Comments

Mishen Thakshana Over a year ago

This shows me an error to before the label ')' showing in red color

T.J. Crowder Over a year ago

@MishenThakshana - Ah, you weren't missing the ), it was just in the wrong place. I've updated the answer.

T.J. Crowder Over a year ago

@MishenThakshana - Ah yes, of course.

Rajesh Dixit · Accepted Answer · 2022-09-06 10:36:57Z

As rightly commented by @Konrad Linkowski

This is invalid syntax

What is the issue with it?

What you are using is called expression. So condition1 && condition2 will return false if condition1 is falsey or will return condition2.

In your expression, its condition1 && condition2 condition3. There needs to be an operator between condition2 and condition3 or they need correct structure.

If you want label to always render and icon for "new" buttons, it should be:

{condition1 && condition2}
{condition3}

but if you need them to render together or none, you need to wrap then so that your expression returns 1 value:

{
    condition1 &&
    (<>
        element1
        element2
    </>)
}

Sample

const ModalButton1 = ({ label, mode }) => {
  return (
    <button type="submit">
      {
        mode == "new" && (
        <FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />)
      }
      { label }
    </button>
  );
};


const ModalButton2 = ({ label, mode }) => {
  return (
    <button type="submit">
      {
        mode == "new" && (
          <>
            <FaPlusCircle style={{ fontSize: "20px", paddingTop: "6px" }} />)
            {label}
          </>
      }
    </button>
  );
};

Good guy · Accepted Answer · 2022-09-06 10:36:49Z

0

A JSX expression can only return a single value. If you want to return several values, wrap them in an array, like so:

{mode == "new" && [<Component/>, label]}

edited Sep 6, 2022 at 10:36

answered Sep 6, 2022 at 10:22

Good guy

341 silver badge3 bronze badges

3 Comments

DBS Over a year ago

I think you might be being downvoted because "A JSX expression can only return a single element" is slightly misleading, it can only return a single value, but as you have shown, that value can contain multiple elements (in the case of arrays/nested JSX elements) Might be worth clarifying.

T.J. Crowder Over a year ago

Or possibly having a component with no key in an array (but if it were me, I'd just comment that, not downvote).

Good guy Over a year ago

@DBS you're right, edited my answer.

Collectives™ on Stack Overflow

Writing JSX with JavaScript

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related