I’m trying to add a new input on button click in one of my React components.
What’s the most elegant way to do it?
This is an abstraction of my code:
const addDivs = (type) => { ??? }
export default function Form() {
handleSubmit(e) {...}
return (
<form onSubmit={handleSubmit}>
<div><textarea rows="4" placeholder="Write about something here..." /></div>
//New divs should go here
//Adds a textarea
<button onClick={() => addDivs(textarea)}>Add textarea</button>
//Adds an upload field
<button onClick={() => addDivs(upload)}>Add image</button>
<input type="submit" value="Submit" /> </form> );
}
I want to keep the buttons underneath the inputs.
How’s the best way to do this?