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:

<img className="image" src="images/{this.props.image}" />

The resulting HTML output is:

<img class="image" src="images/{this.props.image}">

Dionne

Answer 1

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} />

Brine

what about backtips in es6? – Tham

@DavidLavieri See Cristi's answer https://mcmap.net/q/98513/-access-props-inside-quotes-in-react-jsx below. – Dillard

Answer 2

If you want to use the es6 template literals, you need braces around the tick marks as well:

<img className="image" src={`images/${this.props.image}`} />

Poisoning

future ES6 Template literals – Gammy

The string enclosed by backticks is a "template literal": developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Legitimacy

Answer 3

If you're using JSX with Harmony, you could do this:

<img className="image" src={`images/${this.props.image}`} />

Here you are writing the value of src as an expression.

Justajustemilieu

this is something that's hard to find. and for reusable containers this is a-must-know – Wellgrounded

Just so that people don't get confused with mentioning of Harmony, this is a part of ES6 standard, while answer is dated few months before it became a standard. – Tongue

Answer 4

Instead of adding variables and strings, you can use the ES6 template strings! Here is an example:

<img className="image" src={`images/${this.props.image}`} />

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`}

Samanthasamanthia

Answer 5

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.

Fourscore

Answer 6

For People, looking for answers w.r.t to 'map' function and dynamic data, here is a working example.

<img src={"http://examole.com/randomview/images" + each_actor['logo']} />

This gives the URL as "http://examole.com/randomview/images/2/dp_pics/182328.jpg" (random example)

Plagiary

Answer 7

You can do like this

<img className="img" src=`images/${this.props.image}`>

Esquiline

Answer 8

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 => ({i : prevState.i + 1}));

    console.log(this.state.j);  
  }


  render() {

    return (
      <div>
        <p onClick={this.handleClick.bind(this)}>Click to change image</p>
        <img src={'images/back'+ this.state.i+'.jpg'}/>
      </div>
      );

  }
}

Thresathresh

Answer 9

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"
      }

Backwash

I'd recommend uses classnames package for building dynamic classNames – Tham

Answer 10

you can use

<img className="image" src=`images/${this.props.image}`>

or

<img className="image" src={'images/'+this.props.image}>

or

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }

Artema