I am trying to display an image from my API. The code I am using so far does not seem to work, in the src of the image it shows just the string not the image i.e <img src="{data.home[0].image}" alt="image">.
My code so far is:
import React, { Component } from 'react';
import '../main/main.css';
class Main extends Component {
constructor() {
super();
this.state = {
name: 'React',
awsApiData: [],
};
}
componentDidMount() {
console.log('app mounted');
/*global fetch */
fetch('https://onelbip0e6.execute-api.eu-west-2.amazonaws.com/livestage/xxxx')
.then(data => data.json())
.then(data => this.setState({ awsApiData: data }, () => console.log(data)));
}
render() {
const data = this.state.awsApiData;
return (
<div className="main-content container">
{(data && data.home) &&
<div><h2>{data.home[0].title}</h2><br /><p>{data.home[0].body}</p>
<img src="{data.home[0].image}" alt="image"></img>
</div>
}
</div>
);
}
}
export default Main;
src="{data.home[0].image}"tosrc={data.home[0].image}.. Remove double quotes around the curly brackets.." "is always a string.{}is JSX syntax for a javascript expression. To use a variable within JSX you must use the{}syntax, and not from within a string.