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’}
