Fetch data

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

class Location extends React.Component {
  state = {
    locations: [
      {
        "name": "Ojo",
        "zone": "Lagos State",
        "region": "South West"
      },
      {
        "name": "Ahiazu Mbaise",
        "zone": "Imo State",
        "region": "South East"
      },
      {
        "name": "Akoko-Edo",
        "zone": "Edo State",
        "region": "South South"
      },
      {
        "name": "Anka",
        "zone": "Zamfara State",
        "region": "North West"
      },
      {
        "name": "Akwanga",
        "zone": "Nasarawa State",
        "region": "North Central"
      }
    ]
  }

 	render() {
    return (
      <div>
          {this.state.locations.map(location => 
              <LocationCard key={location.id} {...location} />)
          }
      </div>
    )
  }
}

const LocationCard = (props) => {
  return (
    <div>
      <p>Name: {props.name.toUpperCase()}</p>
      <p>Zone: {props.zone}</p>
      <p>Region: {props.region}</p>
      <hr/>
    </div>
  )
}

ReactDOM.render(<Location />, document.getElementById("root"));