CODEWITHSUNDEEP
reactjsjsx
mellis481
mellis481

Reputation: 4168

JSX prop syntax

In JSX, you can specify string literal props in two ways:

<input id={'active_input'} />

and 

<input id="active_input" />

Is there a name for each of those syntaxes?

Upvotes: 0

Views: 48

Answers (2)

kind user
kind user

Reputation: 41893

<input id={'active_input'} /> is a React syntax. You can pass basically whatever you wish, a string, a boolean, an array and so on.

<input id="active_input" /> is a basic HTML syntax. It's limited to pass only the strings, so it's not kind of useful when it comes to pass various props.

Upvotes: 0

kev
kev

Reputation: 1031

I don't find an authoritative source for the following but I would say: <input id={'active_input'} /> is a string literal inside a JS expression and <input id="active_input" /> is a string literal.

There is but a (in my opinion) significant distinction between the two: The first one is HTML-unescaped but the second one is just a string literal.

So the following are not equal:

<MyComponent message="<3" />
<MyComponent message={'<3'} />

The following are equal:

<MyComponent message="&lt;3" />
<MyComponent message={'<3'} />

Source: reactjs.org

Upvotes: 2

Related Questions