Why must I use the spread operator in this JSX element?

Question

I have a functional component that returns an anchor element that can have the attributes href and role, depending on the props that are passed to it:

function Item(props) {
    return (
        <a {...props.toSubMenu && {role: 'button'}} {...props.href && {href: props.href}}>
            {props.children}
        </a>
    );
}

While creating this component, I first tried to pass props without using the spread operator like so: <a {props.toSubMenu && {role: 'button'}}>, but this gave me the error:

Parsing error: Unexpected token, expected "..."

So at the moment, I have my component working the way I want it, but I cannot figure out why I must use the spread operator. In other parts of my code (like on line 4) I do not need it. I have read about it in this question and this one and in the react documentation, but I am still uncertain.

No, you **must not**; this is a very miss-leading usage of spread; — Mechanic, Apr 25 '20 at 13:47

score 1 · Answer 1 · answered Apr 25 '20 at 13:35

1

I assume you want to give <a/> the role buttonin case toSubMenu is true? And that you just want to forward href? In that case, would the following work?

function Item(props) {
    return (
        <a role={props.toSubMenu ? 'button' : undefined} href={props.href}>
            {props.children}
        </a>
    );
}

answered Apr 25 '20 at 13:35

BerndS

409
2
8

Although this works (as does the code I posted in my question), it is not really an answer to my question. – Dirk J. Faber Apr 25 '20 at 14:01

ZenG · Answer 2 · 2020-04-25T14:10:08.933

I extract this from your code as an example

function Item(props) {
    return (
        <a {...props.toSubMenu && {role: 'button'}} >
            {props.children}
        </a>
    );
}

Let's assume props.toSubMenu is not null
after conversion to pure html: (this doesn't work at all!)

function Item(props) {
    return (
        <a {role: 'button'} >
            {props.children}
        </a>
    );
}

if you use spread operator like this

function Item(props) {
    return (
        <a {...props.toSubMenu && ...{role: 'button'}} >
            {props.children}
        </a>
    );
}

it will spread out the object {role: 'button'} as:

function Item(props) {
    return (
        <a role="button" >
            {props.children}
        </a>
    );
}

one thing to note: in

{...props.toSubMenu && {role: 'button'}}

the outermost {} is not a symbol for object, it's a sign for code snippet to run in jsx file.

Conclution

you don't have to use spread operation, this also works

function Item(props) {
    return (
        <a role={props.toSubMenu && 'button'} >
            {props.children}
        </a>
    );
}

but since role is already defined in props, why not just spread it out?

score 0 · Answer 3 · answered Apr 25 '20 at 14:10

In JSX, the {} do not output strings as is the case in many templating languages, you need to look at it as an assignment where the left hand is the property, Now to set the value depending on the setting prop just follow the same logic: to explain why the error says expected "...". If the {} do not fall on the right side of an assignment it is expected that you want to spread multiple properties, SO,try this

function Item(props) {
    return (
        <a role={props.toSubMenu ? 'button' : undefined} href={props.href}>
            {props.children}
        </a>
    );
}

Why must I use the spread operator in this JSX element?

3 Answers3

Conclution