[FIXED] How to get an image link from a JSON to render in a react app

Issue

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

Solution

You can use an img tag to render user avatar,

 <td>
  <img src={user.avatar} />
 </td>

Answered By - Abito Prakash

Answer Checked By - Senaida (PHPFixing Volunteer)