Breaking News: Grepper is joining You.com. Read the official announcement!

double curly braces in React's JSX syntax

VISION 237 answered on November 6, 2022 Popularity 9/10 Helpfulness 1/10

answer double curly braces in React's JSX syntax

related Double curly braces in React's JSX syntax?

double curly braces in React's JSX syntax

Comment

This is just a JSX syntax notation, normal HTML accepts inline styles with strings like style="color:red", but JSX syntax don't accept inline styles in form of string. 
We have to pass them as Objects dynamically and only way to embed JavaScript objects in JSX is to use {} notation, which gives us syntax like style={{color:'red'}}

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: curly-braces double javascript jsx syntax

Link to this answer
Share Copy Link

Contributed on Nov 06 2022

VISION 237

0 Answers Avg Quality 2/10

Closely Related Answers

Double curly braces in React's JSX syntax?

Comment

Curly braces has got 2 usage here:-

A. { .. } evaluates to an expression in JSX.
B. { key: value } implies a javascript object.

Let see a simple example.

<Image source={pic} style={{width: 193}}/>

If you observe pic is surrounded by single braces. 
That's the JSX way of embedding variable. pic can be any Javascript expression/variable/object. 
You can also do something like { 2+3 } and it will evaluate to { 5 }

Let's dissect style here. {width: 193} is a Javascript object. 
And to embed this object in JSX you need curly braces, hence, { {width: 193} }

Note: To embed any kind of Javascript expression/variable/object in JSX you need curly braces.

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: curly-braces curly-brac

Link to this answer
Share Copy Link

Contributed on Nov 06 2022

VISION 237

0 Answers Avg Quality 2/10

double curly braces in React's JSX syntax

Contents

More Related Answers

double curly braces in React's JSX syntax

Closely Related Answers

Double curly braces in React's JSX syntax?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.