Forms in ReactJs | controlled vs uncontrolled components part 1

 Forms in ReactJs  | controlled vs uncontrolled components

Using bootstrap 

import React from "react";
import { useState } from "react/cjs/react.development";
const App = () => {
  const [text, setText] = useState(" ");
  const [btn, setBtn] = useState(" ");
  const onText = (event) => {
    setText(event.target.value);
  }
  const btnClick = () => {
    setBtn(text)
  }
  return (
    <>
      <div className="container my-3">
        <div class="mb-3">
          <h2>Enter text here...</h2>
          <input type="text" onChange={onText} class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
        </div>
        <button type="submit" onClick={btnClick} class="btn btn-primary">Submit</button>
      </div>
      <div className="container">
        <div class="mb-3">
          <h2>Textarea</h2>
          <textarea class="form-control" value={btn} id="exampleFormControlTextarea1" rows="7" readOnly></textarea>
        </div>
      </div>
    </>
  );
}
export default App;