score:2

Accepted answer
export const hello = {
    <h1 id="title"
        classname="header"
        style={{backgroundcolor: 'turquoise', color: 'white', fontfamily: 'verdana'}}>
        {text.hello}
    </h1>
}

the {...} are interpreted as an object literal. you cannot put jsx inside an object literal, just like you cannot put arbitrary code inside an object literal.

e.g. this throws a similar error:

export const hello = {
 1 + 1
}

if you want to export the react element, then do just that. remove the {...}:

export const hello = 
    <h1 id="title"
        classname="header"
        style={{backgroundcolor: 'turquoise', color: 'white', fontfamily: 'verdana'}}>
        {text.hello}
    </h1>;

inside jsx, {...} have a different meaning. e.g. in

<span>{1+1}</span>

the {...} let the parser know that the content is a javascript expression.


Related Query

More Query from same tag