Friends with Pets Props Practice
Build a simple React app that has a <FriendList />
component, a <Friend />
component and a <Pet />
component.
In <FriendList />
, .map()
through an array of friends. Each friend will have an array of pets. Feel free to use array at the bottom of this write up. In your .map()
, render a <Friend />
component, passing through the name, age, and pets of each friend as props.
<Friend />
Should display the info nicely. Use some styles and appropriate HTML(JSX) tags. <Friend />
Should also .map()
through the pets array and render <Pet />
. Pets should also be displayed nicely.
Think about how you display strings, numbers, and arrays while building this app.
const friends = [
{
name: "Ben",
age: 29,
pets: [
{
name: "spot",
breed: "tabby"
},{
name: "John Johnson",
breed: "husky"
},{
name: "Bear the bear",
breed: "Grizzly"
}
]
},{
name: "Bob",
age: 31,
pets: [
{
name: "Sally",
breed: "Australian Shepard"
}
]
},{
name: "Marcus",
age: 25,
pets: [
{
name: "Indy",
breed: "Akita"
},{
name: "Anna",
breed: "persian cat"
}
]
},{
name: "Jacob",
age: 20,
pets: [
{
name: "fluffy",
breed: "sphynx cat"
},{
name: "patches",
breed: "sphynx cat"
},{
name: "tiger",
breed: "sphynx cat"
},{
name: "oscar",
breed: "sphynx cat"
}
]
}
]