map.js

import "./App.css";
import PropTypes from "prop-types";

import Wilder from "./Wilder";

const wilderArray = [
  {
    title: "new title 1",
    name: "new name 1",
  },
  {
    title: "new title 2",
    name: "new name 2",
  },
  {
    title: "new title 3",
    name: "new name 3",
  },
];

function App() {
  return (
    <div>
      <header>
        <div className="container">
          <h1>Wilders Book</h1>
        </div>
      </header>
      <main className="container">
        <h2>Wilders</h2>
        <section className="card-row">
          {wilderArray.map((el) => (
            <Wilder {...el} />
          ))}
        </section>
      </main>
      <footer>
        <div className="container">
          <p>&copy; 2020 Wild Code School</p>
        </div>
      </footer>
    </div>
  );
}

Wilder.propTypes = {
  name: PropTypes.string.isRequired,
};

export default App;