03.01 - State & Props - Send counter data to child component (class components)

App preview:

Project files:

src/App.js

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

class App extends React.Component{

  render(){
    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 from "react";
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

class ParentComponent extends React.Component{
    constructor(){
        super();
        this.state = {
            count: 0
        }
    }

    handleClick = () => {
        this.setState((prevState)=>({count: prevState.count+1}))
    }

    render(){
        return(
            <div className="ParentComponent">
                <h2>ParentComponent.jsx</h2>
                <button onClick={()=>{this.handleClick()}}>Click me</button>
                <br/><br/>
                <ChildComponent count={this.state.count}/>
            </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"

class ChildComponent extends React.Component{
    render(){
        const {count} = this.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;
}

Blog

03.01 - State & Props - Send counter data to child component (class components)

adriangheo

Join Our Newsletter. No Spam, Only the good stuff.

Related