Introduction:
- learn to load data from a static JS file
- learn to use useState to store data
- learn to clear the state variable and see that reflected in the UI
1. Create the HTML hierarchy in App.js:
- App component h3 should contain the following text:
0 birthdays today
2. Create the List component in App.js and pass the data as props to List component:
set how many people birthdays today based on the data.length
3. The data file have all the image url, id, age, and name for List component:
4. List component
When pass the data as props to List component, we can deconstruct the props and map the passing data.
5. Add a “Clear” button which will reset it to 0 birthdays.
For the clear all button as the following in App.js component:
- Create a new state variable called people and useState Hook to accept the initial value as the imported data from the top.
- Pass this state variable in the List component.
- When the Clear button is pressed, empty the state variable so that no record is displayed (Hint: set it to an empty array)
Conclusion
Building the birthday reminder react app can help newbie understanding the basic useState Hook, export data and then store in the App.js variable.
see more detail in my github page: https://github.com/chenyibo406
I also update the birthday-app in netify, see my project at: https://birthday-reminder-ac.netlify.app/
Top comments (0)