import React, { useState } from "react";

function Form() {
  const [components, setComponents] = useState(["1"]);

  function addComponent() {
    setComponents([...components, 1]);
    
  }

  const defaultState = [
    {
      title: "",
      desc: "",
    },
  ];

  const [form, setForm] = useState(defaultState);

  const handleChangeTitle = (e) => {
    setForm({
      title: e.target.value,
      desc: form.desc,
    });
  };

  const handleChangeDesc = (e) => {
    setForm({
      title: form.title,
      desc: e.target.value,
    });
  };
  return (
    <div>
      <div style={{ display: "flex" }}>
        <button onClick={addComponent}>+</button>
        {components.map((item, i) => (
          <>
            <div style={{ display: "flex" }}>
              <label>
                Title:
                <input
                  type="text"
                  name="title"
                  onChange={(e) => handleChangeTitle(e)}
                />
              </label>
              <label>
                Description:
                <input
                  type="text"
                  desc="desc"
                  onChange={(e) => handleChangeDesc(e)}
                />
              </label>
            </div>
          </>
        ))}
      </div>
    </div>
  );
}

export default Form;

Hi, I have a code like the one at the top. Pressing the "+" button on the page extracts a text input for title and description on the screen. This means that input numbers are increasing according to the user's request. I want to print these inputs, which have more than one goal, in a single object (defaultState in form state). For example, if you want to use the user pressed the plus button 2 times and the view of the object should be as follows: {title:'Title:'1st title', desc:'1.content', title:'2.title', desc:'2.content', title:'3.title', desc:'3.content'}