4 ms·
It has actually almost nothing to do with React, it's a part of JSX syntax (which can be used with other libraries, and React can be used without it). The oute
by helb 9y ago
It has actually almost nothing to do with React, it's a part of JSX syntax (which can be used with other libraries, and React can be used without it).
The outer curly braces indicate that there's a JS expression inside, and the inner ones are just a part of an object (think JSON). It could look like this if stored in a variable:
let styles = { margin: 0, color: "red" };
…
<div style={styles}>
https://facebook.github.io/react/docs/introducing-jsx.html#embedding-expressions-in-jsx https://facebook.github.io/react/docs/introducing-jsx.html#e...
https://facebook.github.io/react/docs/dom-elements.html#style https://facebook.github.io/react/docs/dom-elements.html#styl...
- TekMol 9y agoNow I am confused. Why the {{}} at all and not just: <div className="row" style="margin": "0">
- heavenlyblue 9y agoYou may use both of the syntaxes; but the former allows to easily inject JS variables directly, rather than by interpolating strings. For example: var userParagraphMarginSetting = '5em'; styles={{ marginLeft: userParagraphMarginSetting }} Against: var styles='marginLeft:'+userParagraphMarginSetting; styles={styles}