Sign up
Sign up
Still Confused?
Affiliate IconRequest a Callback

Add Functionality to Birthday Reminder App

The last part of the application is to add the logic for the clear all button to be able to clear the data and functionality behind the extraction of data from the data folder. To do that, you do not need to create a separate file. We can achieve the logic by using useState() and onClick() function we saw in the previous module.

  • Add the logic to the App component.
import React, { useState } from 'react'

import data from './data/data'

import List from './List'

function App() {

    // create a state variable here

    const [people, setPeople] = useState(data)



    // this should clear all records

    function clearAllRecords() {

        setPeople([])

    }

    return (

        <main>

          <h1>Birthday Reminder</h1>

            <section className="container">

                <h3>{people.length} birthdays today</h3>

                <List people={people} />

                <button onClick={clearAllRecords}>Clear All</button>

            </section>

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

        Made by Guvi💚

      </a>

        </main>

    )

}



export default App

With adding the logic to the component, you will now be able to see the entire working of the controls and display. The output will look like this

Congratulations 🎉!

You have successfully created your own birthday reminder application.

In the next module, we will look into the steps to deploy the project using vercel.

See you in the next module!

Share

You can share this topic with your family and friends on Social Media.

Share in

Build a Birthday Reminder App using React JS

author

Build a Birthday Reminder App using React JS

MODULE 1 : Introduction
lessonIntroduction
lessonWhat is React JS?
lessonWhat is a Birthday Reminder App?
lessonAim of the Project
MODULE 2 : Pre-requisites
lessonBasic Requirements
lessonTech Stack
lessonInput and Output
lessonNecessary JS Concepts
MODULE 3 : Necessary Concepts
lessonReact JS Components
MODULE 4 : Step-by-Step Implementation
lessonSetting up the Environment
lessonCreate Custom Data
lessonCreate Application Structure
lessonApply Styles to the Application
lessonAdd Functionality to the Application
MODULE 5 : Deployment (Optional)
lessonUpload Files in GitHub Repository
lessonDeploy in Vercel
MODULE 6 : Conclusion
lessonLearning Outcome
lessonMCQs
lessonCourse

Build a Birthday Reminder App using React JS

    MODULE 1 : Introduction
    lessonIntroduction
    lessonWhat is React JS?
    lessonWhat is a Birthday Reminder App?
    lessonAim of the Project
    MODULE 2 : Pre-requisites
    lessonBasic Requirements
    lessonTech Stack
    lessonInput and Output
    lessonNecessary JS Concepts
    MODULE 3 : Necessary Concepts
    lessonReact JS Components
    MODULE 4 : Step-by-Step Implementation
    lessonSetting up the Environment
    lessonCreate Custom Data
    lessonCreate Application Structure
    lessonApply Styles to the Application
    lessonAdd Functionality to the Application
    MODULE 5 : Deployment (Optional)
    lessonUpload Files in GitHub Repository
    lessonDeploy in Vercel
    MODULE 6 : Conclusion
    lessonLearning Outcome
    lessonMCQs
    lessonCourse
    Gift IconUnlock Your Exclusive Rewards!

    You have exclusive rewards which you can unlock by earning Geekoins. Explore your rewards now!

    Explore Rewards