01.03 Multiple props through multiple components (functional components)

App preview:

Project files:

---

src/App.js

import './App.css';
import ParentComponent from './components/ParentComponent';

function App() {
  return (
    <div className="App">
      <h1>App.js</h1>
      <ParentComponent favoriteBand='The Beatles' favoriteAlbum='Abbey Road' favoriteSong='Here Comes the Sun'/>
    </div>
  );
}

export default App;

---

src/App.css

.App{
    background-color: lightskyblue;
    padding: 20px 10px;
}

---

---

src/components/ParentComponent.jsx

import ChildComponent from "./ChildComponent";
import './ParentComponent.css'

function ParentComponent(props){
    const {favoriteBand, favoriteAlbum, favoriteSong} = props

    return(
        <div className="ParentComponent">
            <h2>ParentComponent.jsx</h2>
            <ChildComponent 
                favoriteBand={favoriteBand} 
                favoriteAlbum={favoriteAlbum} 
                favoriteSong={favoriteSong}
            />
        </div>
    )
}

export default ParentComponent;

---

src/components/ParentComponent.css

.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
}

---

---

src/components/ChildComponent.jsx

import './ChildComponent.css'

function ChildComponent(props){
    const {favoriteBand, favoriteAlbum, favoriteSong} = props

    return(
        <div className="ChildComponent">
            <h3>ChildComponent.jsx</h3>
            <p>//the props bellow are sent from <b>App.js</b></p>
            <p><b>Favorite Band:</b> {favoriteBand} </p>
            <p><b>Favorite Album:</b> {favoriteAlbum}</p>
            <p><b>Favorite Song:</b> {favoriteSong}</p>
        </div>
    )
}

export default ChildComponent;

---

src/components/ChildComponent.css

.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
}