Create Application Structure for Birthday Reminder App

// List.jsx



import React from 'react'



// accept props here

const List = (props) => {

    const { people } = props

    // Map over prop "people" and code the right structure



    return people.map((person) => {

        const { id, name, age, image } = person

        return (

            <article key={id}>

                <img src={image} alt={name} />

                <div>

                    <h4>{name}</h4>

                    <p>{age} years</p>

                </div>

            </article>

        )

    })

}



export default List

import React from 'react'

import data from './data/data'

import List from './List'

function App() {

    }

    return (

        <main>

          <h1>Birthday Reminder</h1>

            <section className="container">

                <h3> birthdays today</h3>

                <List people={people} />

                <button >Clear All</button>

            </section>

            <a href="https://www.guvi.in/" className="copywright">

        Made by Guvi💚

      </a>

        </main>

    )

}



export default App