I want to know how to make a button that makes a new <input> everytime user clicks it and I want its value to be added to an array.
I used this code that I found but it only does the first part!
import React from "react";
import { Button, FormInput } from "shards-react";
class Parameter extends React.Component {
id = 1;
state = {
list: []
}
item(id) {
return (
// <div >
// <i className="material-icons" onClick={e => this.remove(`${id}`)} >delete</i>
// </div>);
<FormInput className="mb-1" key={id} id={`param-${id}`} placeholder="Competetion parameters"/>
);
}
remove(id) {
const newList = this.state.list.filter(item =>item.key !== id);
this.setState({
list: newList
})
}
addParam = () => {
const list = this.state.list;
list.push( this.item(this.id) )
this.setState({ list });
this.id++;
}
render() {
return (
<div>
<Button onClick={e => this.addParam()} theme="primary">Add parameter</Button>
{
this.state.list.map(item => item)
}
</div>);
}
}
export default Parameter;
I want to know how can I put a group of input values, to an array React is really new to me, id be very happy if someone could help me with this!
I want to know how to make a button that makes a new every time user clicks it and I want its value to be added to an array and post it with Axios.
It feels there are two questions in one here; first is how to deal with the state (amount of inputs) and second how to save the array.
I can't really help with the second one without examining how setLoading exactly works, but I have a suggestion for dealing with the state. Add each input value as a string into an array and do something like this:
document.onreadystatechange = () => {
const { useState } = React;
function Boxes() {
const [inputs, setInputs] = useState([]);
const addInput = () => {
setInputs(inputs.concat("abc"));
};
const changeInput = (index, value) => {
const updated = [...inputs];
updated[index] = value;
setInputs(updated);
};
const handleAdd = () => {
alert("Saving " + JSON.stringify(inputs));
};
return (
<div>
<p>inputs</p>
{inputs.map((input, index) => {
return (
<div key={index}><input
type="text"
value={input}
onChange={(e) => changeInput(index, e.target.value)}
/></div>
);
})}
<button onClick={addInput}>Add new input</button>
<hr />
<button onClick={handleAdd}>Add</button>
</div>
);
}
ReactDOM.render(<Boxes />, document.querySelector("#root"));
};<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>