03.02 - State & Props - Send counter data to child component (functional components)

App preview:

Project files:

---

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

function App(){
  return(
    <div className="App">
      <h1>App.js</h1>
      <ParentComponent/>
    </div>
  )
}

export default App;

---

src/App.css

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

h1, h2, h3{
  margin-top: 0px; 
  margin-bottom: 6px;
  padding-top: 0px;
  padding-bottom: 0px;

}

---

---

src/components/ParentComponent.jsx

import React, { useState } from "react";
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

function ParentComponent(){
    const [counter, handleClick] = useState(0);

    return (
      <div className="ParentComponent">
        <h2>ParentComponent.jsx</h2>
        <button onClick={()=>(handleClick(counter+1))}>Click me</button>
        <br/><br/>
        <ChildComponent count={counter}/>
      </div>
    );
  }

export default ParentComponent;

---

src/components/ParentComponent.css

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

---

---

src/components/ChildComponent.jsx

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

function ChildComponent(props){
    const {count} = props;

    return(
        <div className="ChildComponent">
            <h3>ChildComponent.jsx</h3>
            <p>The value of count is {count}.</p>
        </div>
    )
}

export default ChildComponent;

---

src/components/ChildComponent.css

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