new to react here. As the title says, I have a JSON that has data in it that I am trying to render. Everything is showing except for the pictures. How can I make them show. Here is my code:
import React, { useEffect, useState } from 'react';
import './App.css';
function App() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('https://reqres.in/api/users')
.then(response => response.json())
.then(resData => setUsers(resData.data))
}, []);
return (
<div className="App">
<table>
<tbody>
{
users.map((user, index) =>
<tr key={index}>
<td>{user.first_name}</td>
<td>{user.last_name}</td>
<td>{user.email}</td>
<td>{user.avatar}</td>
</tr>
)
}
</tbody>
</table>
</div>
);
}
export default App;
The end result should be like this: https://i.imgur.com/FV4B6fg.png
You can use an img tag to render user avatar,
<td>
<img src={user.avatar} />
</td>
As you need to render the link as an image you should use img tag.
<img src={user.avatar} alt=""/>
If you need to set width or height, you can do as follows.
<img src={user.avatar} alt="" width="200px"/>
You want to use img and {user.avatar} will return image url, so if you have a link of img, instead of directly using it in <td> tag use it like -
<td><img src={user.avatar} alt="text" /></td>
as you want to use img so you must need to use <img> tag .
import React, { useEffect, useState } from 'react';
import './App.css';
function App() {
const [users, setUsers] = useState([]);
useEffect(() => { fetch('https://reqres.in/api/users') .then(response => response.json()) .then(resData => setUsers(resData.data))}, []);
return ( <div className="App"> <table> <tbody> { users.map((user, index) => <tr key={index}> <td>{user.first_name}</td> <td>{user.last_name}</td> <td>{user.email}</td> <td><img src={user.avatar} alt="text" /></td>
</tr> ) } </tbody> </table> </div> ); }export default App;