#2 React Coding - Display Array Of Users (Exercise)

2-react-coding-display-array-of-users-exercise.markdown

#2 React Coding - Display Array Of Users (Exercise)

A Pen by Kajal Singh on CodePen.

License.

index.html

<div id="root"></div>

script.babel

const users = [
  { name: "John Doe", id: 1 },
  { name: "Jane Doe", id: 2 },
  { name: "Billy Doe", id: 3 }
];

const usersList = users.map((user) => <li key={user.id}>{user.name}</li>);
function App() {
  return (
    <>
      <h3>User names</h3>
      <ul>{usersList}</ul>
    </>
  );
}

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

scripts

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

style.css

h3 {
  margin-left: 20px;
  margin-bottom: 0;
}

ul {
  margin-top: 5px;
}