const user = { name : 'Hedy Lamarr' , imageUrl : 'https://i.imgur.com/yXOvdOSs.jpg' , imageSize : 90 , } ;
export default function Profile ( ) { return ( < > < h1 > { user . name } </ h1 > < img className = "avatar" src = { user . imageUrl } alt = { 'Photo of ' + user . name } style = { { width : user . imageSize , height : user . imageSize } } /> </ > ) ; }
Show more
In the above example, style={{}} is not a special syntax, but a regular {} object inside the style={ } JSX curly braces. You can use the style attribute when your styles depend on JavaScript variables.
If you want to change selection, open document below and click on "Move attachment"
Quick Start – Reacte src attribute: return ( <img className="avatar" src={user.imageUrl} /> ); You can put more complex expressions inside the JSX curly braces too, for example, string concatenation: App.js <span>App.js Download Reset Fork 99 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 const user = { name: 'Hedy Lamarr', imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', imageSize: 90, }; export default function Profile() { return ( <> <h1>{user.name}</h1> <img className="avatar" src={user.imageUrl} alt={'Photo of ' + user.name} style={{ width: user.imageSize, height: user.imageSize }} /> </> ); } Show more In the above example, style={{}} is not a special syntax, but a regular {} object inside the style={ } JSX curly braces. You can use the style attribute when your styles depend on JavaScript variables. Conditional rendering In React, there is no special syntax for writing conditions. Instead, you’ll use the same techniques as you use when writing regular JavaScript code. For example, Summary
| status | not read | | reprioritisations | |
|---|
| last reprioritisation on | | | suggested re-reading day | |
|---|
| started reading on | | | finished reading on | |
|---|
Details