01.02 Pass props through multiple components (functional components)

App preview:

Project files:

---

src/App.js

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

function App() {
  return (
    <div className="app">
      <h2>App.js</h2>
      <ParentComponent  title="This string has been passed through props from App.js"/>
    </div>
  );
}

export default App;

---

src/App.css

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

---

---

src/components/ParentComponent.jsx

import React from 'react'
import ChildComponent from './ChildComponent'
import './ParentComponent.css'

function ParentComponent(props) {
  const {title} = props
  return (
    <div className='parent-component'>
        <h3>ParentComponent.jsx </h3>
        <ChildComponent title={title}/>
    </div>
  )
}

export default ParentComponent

---

src/components/ParentComponent.css

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

---

---

src/components/ChildComponent.jsx

import React from "react";
import "./ChildComponent.css";

function ChildComponent(props) {
  return (
    <div className="child-component">
      <h4>ChildComponent.jsx</h4>
      <p> {props.title}</p>
    </div>
  );
}

export default ChildComponent;

---

src/components/ChildComponent.css

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