Passing Reactjs variable to Image and link Tags

Question

I used this code below to display records. but my current problem is that i could not pass the reactjs values to Image tag and link tag as per line of code below.

<img src=/uploads/{item.pic}></img>
<a href="data.php?id={item.link}" tittle="">Next</a>

what could be the best way to do that

class App extends React.Component {
  constructor(){
    super() 
      this.state = {
        data: []
      }

  }
  componentDidMount() {
    $.ajax({
       url: "jeck.php",
       type: "GET",
       success: function(data) {

         this.setState({data: data});
       }.bind(this),
       error: function(jqXHR) {
         console.log(jqXHR);
       }.bind(this)
    })
  }
  render() {
    return (
      <div>
        {this.state.data.map(function(item, key) {
          return (
            <li key={key}>
              {item.name}
              {item.id}
              {item.pic}
              {item.link}
              <img src=/uploads/{item.pic}></img>
              <a href="data.php?id={item.link}" tittle="">Next</a>
            </li>
          );
        })}
     </div>
    );
  }
}

Answer 1

If you're using an es6 environment, you can use a template literal.

<img src={`/uploads/${item.pic}`}></img>

If you're not, you can concatenate the string

<img src={'/uploads/' + item.pic}></img>