Adding New Input Field using button in ReactJs - reactjs

Question

I am working on a project so I am trying to add a new input field after clicking the add(+) button in the form using react-Hooks. It would be very helpful if someone can figure this out so I can learn a new thing. Thankyou in advance.[React events handling link is added][1]
Here is the code of the form and css file
import Navbar from "./Navbar/Navbar";
import "./UserDetails.css";
function UserDetails() {
const [Info, setInfo] = useState({
username: "",
email: "",
bio: "",
positions: "",
});
const { username, email, bio, positions } = Info;
const onChange = (e) => setInfo({ ...Info, [e.target.name]: e.target.value });
const onSubmit = (e) => {
e.preventDefault();
console.log(Info);
};
return (
<div>
<Navbar />
<div className="full">
<h1 className="top">Edit Profile</h1>
<img
className="pic"
src="https://www.pngitem.com/pimgs/m/146-1468479_my-profile-icon-blank-profile-picture-circle-hd.png"
alt=""
></img>
<div className="inputs">
<form className="frms" onSubmit={(e) => onSubmit(e)}>
<input
className="insides"
type="text"
placeholder="Username"
name="username"
value={username}
onChange={(e) => onChange(e)}
></input>
<input
className="insides"
type="email"
placeholder="email"
name="email"
value={email}
onChange={(e) => onChange(e)}
></input>
<textarea
placeholder="Add Bio here..."
name="bio"
value={bio}
onChange={(e) => onChange(e)}
></textarea>
</form>
</div>
<div className="addbtn">
<input
className="insidesp"
type="text"
placeholder="positions held..."
name="positions"
value={positions}
onChange={(e) => onChange(e)}
></input>
<button>+</button>
<br></br>
<button className="savebtn">Save Changes</button>
</div>
</div>
</div>
);
}
export default UserDetails;
.full {
text-align: center;
border: 2px solid white;
margin: 0 auto;
padding-top: 1%;
width: 50%;
padding-bottom: 1%;
margin-top: 2%;
border-radius: 30px;
box-shadow: 5px 6px 5px 6px rgb(158, 170, 238);
}
.top {
color: rgb(88 99 161);
}
.pic {
height: 40%;
width: 30%;
}
.inputs input {
display: block;
width: 70%;
margin: 0 auto;
margin-top: 2%;
border: 2px solid rgb(88 99 161);
border-radius: 7px;
}
.inputs textarea {
display: block;
width: 70%;
margin: 0 auto;
margin-top: 2%;
border: 2px solid rgb(88 99 161);
border-radius: 7px;
}
.pic {
margin: 2%;
}
.savebtn {
margin-top: 2%;
background-color: rgb(88 99 161);
border: 2px solid rgb(158, 170, 238);
border-radius: 6px;
}
.addbtn {
display: inline;
}
.addbtn input {
margin-right: 1%;
width: 65%;
margin-top: 2%;
border: 2px solid rgb(88 99 161);
border-radius: 7px;
}
.addbtn button {
background-color: rgb(88 99 161);
border-radius: 6px;
border: 2px solid rgb(158, 170, 238);
}```
[1]: https://reactjs.org/docs/handling-events.html

Answer 1

Here is a great article that explains solution for your question step by step:
https://www.cluemediator.com/add-or-remove-input-fields-dynamically-with-reactjs