react json

by Santosh Thakur

HTML

React json

JavaScript

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {

  state = {
    data: []
  };

  loadData() {
    const url = 'https://jsonplaceholder.typicode.com/photos'; 
    fetch(url)
      .then(response => response.json())
      .then(json => {

        this.setState({
          data: json
        });
      });
  }

  

  componentDidMount() {
    this.loadData();
  }

  render() {

    var canvases = this.state.data.map(function (data) {
      return (
        <section key={data.id}>
          <h2>{data.title}</h2>
          <img src={data.thumbnailUrl} alt={data.title} />
          <div>{data.thumbnailUrl}</div>
        </section>
      );
    });

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>

        <div className="App-intro">
          <div>{canvases}</div>
        </div>

      </div>
    );
  }
}

export default App;