03.11 - State & Props - Send color change data to parent comp (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">
          <p><b>App.js</b> |class|</p>
          <ParentComponent/>
      </div>
    );
  }
}

export default App;

---

src/App.css

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

p{
  margin-top: 6px; 
  margin-bottom: 12px 
}

---

---

src/components/ParentComponent.jsx

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

class ParentComponent extends React.Component{
    constructor(){
        super();
        this.state = {
          backgroundColor: "pink"
        }
    }  

    handleInputChange = (event) => {
        this.setState({backgroundColor: event.target.value})
    }

    render(){
        return(
            <div className="ParentComponent"  style={{backgroundColor: this.state.backgroundColor}}>
                <p><b>ParentComponent.jsx</b> |class|</p>
                <ChildComponent  handleInputChange={(event)=>{this.handleInputChange(event)}}  />
            </div>
        )
    }
}

export default ParentComponent

---

src/components/ParentComponent.css

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

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}

---

---

src/components/ChildComponent.jsx

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


class ChildComponent extends React.Component{
    constructor(props){
        super(props);
    }

    handleChange = (event) => {
        this.props.handleInputChange(event);
    }

    render(){
        return (
            <div className="ChildComponent">
                <p><b>ChildComponent.jsx</b> |class|</p>
                <input onChange={(event)=>{this.handleChange(event)}}></input>
            </div>
        );
    }
}

export default ChildComponent;

---

src/components/ChildComponent.css

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

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}