Functional and Class Components in ReactJS

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function FunctionalComponent(props) {
  const [bgColor, setBgColor] = useState(props.bgColor);

  return (
    <div style=>
      <h1>Functional Component</h1>
      <input value={bgColor} onChange={(e) => setBgColor(e.target.value)} />
    </div>
  );
}

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bgColor: props.bgColor };
  }

  render() {
    return (
      <div style=>
        <h1>Class Component</h1>
        <input
          value={this.state.bgColor}
          onChange={(e) => this.setState({ bgColor: e.target.value })}
        />
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <FunctionalComponent bgColor="orange" />
    <hr />
    <ClassComponent bgColor="cyan" />
  </>
);