Map data

by Allie Yu

HTML

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

CSS

.App {
  font-family: sans-serif;
  text-align: center;
}
.users {
  text-align: left;
  margin: 30px 20px;
}
.users div {
  padding: 10px;
  margin: 10px;
  background: rgb(118, 165, 196);
  border-radius: 10px;
}
.page-deets {
  margin-top: 80px;
}

Babel + JSX

const users = [
  {
    name: "😃 William",
    location: "🏘️ Lagos",
    car: "🚘 Honda"
  },
  {
    name: "😃 Chris",
    location: "🏘️ Moon",
    car: "🚘 Tesla"
  },
  {
    name: " 😃 Rose",
    location: "🏘️ Venice",
    car: "🚘 Pagani"
  },
  {
    name: "😃 Mike",
    location: "🏘️ Milan",
    car: "🚘 Rolls Royce"
  },
  {
    name: "😃 Liz",
    location: "🏘️ Beirut",
    car: "🚘 Mercedes"
  }
];


class App extends React.Component {

	render(){
  return (
    <div className="App">
      <div className="page-deets">
        <h2>Iterate over Array and display data</h2>
      </div>

      {/* Iterate over imported array in userData */}
      <div className="users">
        {users.map((user, index) => (
          <div key={index}>
            <h3>{user.name}</h3>
            <p>{user.location}</p>
            <p>{user.car}</p>
          </div>
        ))}
      </div>
    </div>
  );
  }
}

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