- Import the characters from
db.js
file intoApp.js
- Create a components folder inside the src folder
- Create
Header
,CharacterList
,Character
,QuoteList
, andQuote
components inside components folder - Pass the characters from the
db.js
file to theCharacterList
component (How do we pass information from one component to another?) -
Header
andCharacterList
components should be children of thediv
in the App's JSX
- The
Header
component should return adiv
with the className "header" - Inside the
div
, there should be:-
h1
with text "Lord of The Rings" -
h2
with text "Character Bios"
-
- The
CharacterList
component should return adiv
with the className "characters-flex" - Create a variable that stores an array of
Character
components - Use props to pass character data to
Character
component - Use a key in the
Character
component (use crypto or uuid) - Display this array of
Character
components in the JSX
- Destructure prop into variables
- Parent
div
with className "character" - Inside the
div
, there should be:-
img
withimage
assrc
andalt
equal toCharacter Portrait of ${name}
-
h2
forname
-
p
forrace
-
p
forstatus
-
p
forweapon
-
QuoteList
component passingquotes
to theQuoteList
-
- Destructure prop into variable
quotes
-
QuoteList
should return aul
element with the className "quotes" - Create variable that stores an array of Quotes components
- Use props to pass quote data to
Quote
component - Use a key in the
Quote
component (use crypto or uuid) - Display this array of
Quote
components in the JSX
- Destructure prop into variable
quote
- Return a single
div
with the className "quote", with the contents of thequote
inside
- Use conditional rendering in the
Character
component using ashowQuotes
prop to show/hide quotes for each character - Default to showing quotes for all characters, unless set to
false