Babel error: JSX value should be either an expression or a quoted JSX text

Question

I'm getting an error from Babel when trying to compile my JSX code into JS. I'm new to react so apologies if this is an obvious issue, I wasn't able to find anything about it that seemed related. I'm attempting to use props in this chunk of code, and pass a pageTitle prop to my FieldContainer component. This is giving me an issue, though, that isn't letting the code compile to JS. I discovered in my searching that prop values should be passed between {}, but adding these did not help. Any ideas? Thanks!

Answer 1

It's hard to tell what you are trying to do here, but as the error says, the value of an attribute must be an expression {foo} or quoted text "foo".

In this case

Child={<LoginForm />}

or

Child={LoginForm}

is probably what you want.

Answer 2

I got this error because I failed to quote a property inside of the JSX:

<span aria-hidden=true ...

should have been

<span aria-hidden="true" ...

Answer 3

Just faced same issue, I was writing

component="Contacts"

resolved it by rewriting it as:

component={Contacts}