Fill in the the incomplete files to display random animal facts. Follow the errors in your browser, and make the tests pass to complete the challenge. You'll be working in the following files:
- App.jsx
- FactsList.jsx
- Fact.jsx
It is reccomended to complete the requirements in an order similar to the outline below:
| ORDER | DESCRIPTION |
|---|---|
| 1 | Set the state in App.jsx with the animal facts (from data.jsx file) |
| 2 | Pass the animal facts down from the App component to the FactsList component |
| TIP | Use chrome dev tools for React to check the values of state and props in each component as you work through this challenge...or console.log to check |
| 3 | In FactsList.jsx, dynamically render the data |
| 4 | Fill in the Fact component with the data that's been passed down through props. |
| 5 | Create an event handler function called handleFavoriteClick in App.jsx which updates the state of favorite with the name of the animal that is favorited |
| 6 | Pass the handleFavoriteClick method down from the App component to the Fact component |
| 7 | Connect handleFavoriteClick to an onClick event for the button in Fact.jsx. |
To get started:
Navigate to the project Directory
$ cd ReactMiniChallengeInstall the dependencies
$ npm installStart the dev server
$ npm run startCheck if tests are passing
$ npm run testFormat the code with Prettier
$ npm run format| React | Vite | Vitest | React Testing Library |