Populate Data on load (React)

Monday, May 10th, 2021

•

1 min read

• views

Fetch random thumbnail images from jsonplaceholder on page load and display it. (using axios for CRUD operations)

Visit codeSandbox

 
import axios from 'axios';
import { useEffect, useState } from 'react';
 
export default function App() {
  const [imgdat, setImgdat] = useState([]);
  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/photos')
      .then(({ data }) => {
        setImgdat(data);
      });
  }, []);
 
  return (
    <div className="App">
      {imgdat.map((item, index) => {
        return <img alt="data" src={item.thumbnailUrl} key={index} />;
      })}
      <h1>Data from JSON Placeholder</h1>
    </div>
  );
}