4.1 Create Input Field

setState

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  state = {
    userInput: "",
  };
  inputChangeHandler = (event) => {
    this.setState({
      userInput: event.target.value,
    });
  };
  render() {
    return (
      <div className="App">
        <input
          type="text"
          value={this.state.userInput}
          onChange={(event) => this.inputChangeHandler(event)}
        />
        <p>{this.state.userInput.length}</p>
      </div>
    );
  }
}

export default App;

useState()

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

const app = () => {
  const [inputUserState, setInputUserState] = useState({
    userInput: "",
  });
  const changeInputHandler = (event) => {
    setInputUserState({
      userInput: event.target.value,
    });
  };
  return (
    <div className="App">
      <input type="text" onChange={(event) => changeInputHandler(event)} />
      <p>{inputUserState.userInput.length}</p>
    </div>
  );
};

export default app;