React - fetch Javascript

by Fulvio Cezar Canducci Dias

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

function App() {
	const [photos, setPhotos] = React.useState([]);
  const handleLoadPhotos = () => {
  	fetch('https://fakerapi.it/api/v1/images?_width=200&_height=200')
    	.then(json => json.json())
      .then(result => {
      	if (result.code === 200) {
      		setPhotos(result.data);
        }
      })
  }
  React.useEffect(() => {
  	handleLoadPhotos();
  }, [])
	return (
  	<div className="row">
  	  {photos.map((p, i) => (
      	<div className="col mt-3">
          <img src={p.url} style={{borderRadius:'50%'}} alt="" key={i}/>
        </div>
      ))}
  	</div>
  )
}
ReactDOM.render(<App />, document.querySelector("#app"))