Access props inside quotes in React JSX

Question

In JSX  how do you reference a value from props from inside a quoted attribute value   For example    lt img className  image  src  images  this props image     gt    The resulting HTML output is    lt img class  image  src  images  this props image   gt

User · Answer

Best practices are to add getter method for that :

getImageURI() {
  return "images/" + this.props.image;
}

<img className="image" src={this.getImageURI()} />

Then , if you have more logic later on, you can maintain the code smoothly.

User · Answer

For People  looking for answers w r t to  map  function and dynamic data  here is a working example     lt img src   http   examole com randomview images    each actor  logo      gt    This gives the URL as  http   examole com randomview images 2 dp pics 182328 jpg   random example

User · Answer

Here is the Best Option for Dynamic className or Props   just do some concatenation like we do in Javascript        className            badge              this props value    badge-primary      badge-danger                m-4

User · Answer

Instead of adding variables and strings  you can use the ES6 template strings  Here is an example    lt img className  image  src   images   this props image      gt    As for all other JavaScript components inside JSX  use template strings inside of curly braces  To  inject  a variable use a dollar sign followed by curly braces containing the variable you would like to inject  For example     string   variable  another string

User · Answer

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    lt img className  image  src   images     this props image    gt

User · Answer

Note  In react you can put javascript expression inside curly bracket  We can use this property in this example  Note  give one look to below example     class LoginForm extends React Component      constructor props        super props        this state    i 1          handleClick         this setState prevState   gt    i   prevState i   1          console log this state j             render          return          lt div gt           lt p onClick  this handleClick bind this   gt Click to change image lt  p gt           lt img src   images back   this state i   jpg    gt         lt  div gt

User · Answer

If you re using JSX with Harmony  you could do this    lt img className  image  src   images   this props image      gt    Here you are writing the value of src as an expression

User · Answer

If you want to use the es6 template literals  you need braces around the tick marks as well    lt img className  image  src   images   this props image      gt

User · Answer

you can use    lt img className  image  src  images   this props image   gt    or    lt img className  image  src   images   this props image  gt    or     render              let imageUrl   this props image    images   this props image    some placeholder url image       return           lt div gt             lt img className  image  src  imageUrl    gt          lt  div gt

[javascript] Access props inside quotes in React JSX

Examples related to javascript

Examples related to reactjs

Examples related to react-props