- yarn install
- yarn start
Component Heirarchy
App.js
└───CharactersPage.js
├───FavCharacters.js
| └───CharacterCard.js
├───Characters.js
| └───CharacterCard.js
└───CharacterInfo
Tasks
- render FavCharacters and Characters in CharacterPage (we want FavCharacters to show on the page above Characters)
- fetch all of the breaking bad characters from the breaking bad api ('// https://www.breakingbadapi.com/api/characters')
- render all of the characters in Characters.js (which component will we use to render each character in the Characters component?)
- When a character is clicked on, conditionally render the CharacterInfo in place of Charcters
- add an add to favorites button and a back button to CharacterInfo
- the add to favorites button should show the character clicked on in FavCharacters.js (which component did we use to render each character in Characters.js? can we use that here?)
- the back button should go back to showing the Characters again
- When a character is clicked on in the FavCharacters, it should be removed from FavCharacters
Things to think about
- What should be stored in state?
- Which component will hold state?
- Where should you do the fetch to the breaking bad api?
- Are you using functional components instead of class components where applicable?
- Character is rendered in two different components that require different methods for an onClick. How can we do this? (hint: how are methods passed down to child components? )