React: user interactions

component function App.jsx

Logic

import React, { useState } from "react";

export function App() {
  // state to handle the headline
  //
  const [headline, setHeadline] = useState('');

  // state to handle the input date
  //
  const [inputValue, setInputValue] = useState("");

  // copy data from input state into headline state
  //
  const buttonClicked = () => {
    setHeadline(inputValue);
  };

  // store new input date in  input state
  //
  const inputChanged = (event) => {
    setInputValue(event.target.value)
  };

  return (

    // ** RENDERING
  );
}

  return (
    <div>
      <h1>{headline}</h1>
      <input type="text" onInput={inputChanged}/>
      <br />
      <button type="button" onClick={buttonClicked}>
        Make me big!
      </button>
    </div>
  );