form.js

/**
 * Handling Forms and different events
 * Conditional rendering
 * Looping in react
 */
import "./style.css";
import { useState } from "react";

const RenderResult = (props) => {
  const { showResult, firstName, removeHandler } = props;
  const arrayOfCharacters = firstName.split("");

  if (showResult) {
    return (
      <div className="result">
        Name - {firstName.toUpperCase()}
        <br />
        Length - {firstName.length}
        <br />
        <button
          onClick={() => {
            removeHandler();
          }}
        >
          Remove Section
        </button>
        <div>
          <ul>
            {arrayOfCharacters.map((character, index) => (
              <li key={index}>{character}</li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
  return <div></div>;
};

const FormComponent = () => {
  const [firstName, setFirstName] = useState("");
  const [showResult, setShowResult] = useState(false);

  return (
    <div className="form-container">
      <h2>Form Component</h2>
      <form
        onSubmit={(event) => {
          console.log("hello submit");
          event.stopPropagation();
          event.preventDefault();
          setShowResult(true);
        }}
      >
        <label htmlFor="first-name">
          Name:
          <input
            value={firstName}
            onChange={(event) => {
              setFirstName(event.target.value);
            }}
            name="first-name"
            type="text"
          />
        </label>

        <button type="submit">Submit</button>

        <RenderResult
          firstName={firstName}
          showResult={showResult}
          removeHandler={() => {
            setShowResult(false);
          }}
        />
      </form>
    </div>
  );
};

export default FormComponent;