Menu
In JSX, how do you reference a value from props from inside a quoted attribute value?
For example:
<img className="image" src="images/{this.props.image}" /> The resulting HTML output is:
<img class="image" src="images/{this.props.image}"> 
626
Following approaches are there to access props inside quotes in React JSX: Approach 1: We can put any JS expression inside curly braces as the entire attribute value. Approach 2: We can use ES6 template literals.
Not only can JSX elements be passed as props to components, but we can also pass other components as props.
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. Furthermore, props data is read-only, which means that data coming from the parent should not be changed by child components.
React (or JSX) doesn't support variable interpolation inside an attribute value, but you can put any JS expression inside curly braces as the entire attribute value, so this works:
<img className="image" src={"images/" + this.props.image} /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
