Styjun

I'm currently trying to push my state elements (user_number_X) into an array (this.state.results.numbers) but my input handler function is not working.

How can I rewrite it so it will push input values into an array?

Here is my code:

export default class InputArea extends React.Component 
 constructor(props)
 super(props);
 this.state = 
 draw_number: '',
 user_number_1: '',
 user_number_2: '',
 user_number_3: '',
 user_number_4: '',
 user_number_5: '',
 user_number_6: '',
 results : 
 numbers: [],
 draws: ''
 
 
 

 /* handledrawsChange = event => 
 this.setState(
 event
 )
 */

 inputHandler = event => 
 this.setState([event.target.name]: event.target.value);
 this.state.results.numbers.push(event.target.value)
 // this.state.results.numbers.push(event.target.value)//this.setState(number: this.state.results.numbers.push(parseInt(event.target.value)));
 

 componentDidMount() 
 fetch("http://localhost:8080/simulate", 
 method: "POST",
 body: this.state.results
 );
 


 render() 
 console.log(this.state);
 return (
 <InputField>
 <InputWrapper>
 <Label>1st number</Label>
 <Input name="user_number_1" type="number" maxlength="2" value=this.state.user_number_1 onChange=this.inputHandler required></Input>
 <Label>2nd number</Label>
 <Input name="user_number_2" type="number" maxlength="2" value=this.state.user_number_2 onChange=this.inputHandler required></Input>
 <Label>3rd number</Label>
 <Input name="user_number_3" type="number" maxlength="2" value=this.state.user_number_3 onChange=this.inputHandler required></Input>
 <Label>4th number</Label>
 <Input name="user_number_4" type="number" maxlength="2" value=this.state.user_number_4 onChange=this.inputHandler required></Input>
 <Label>5th number</Label>
 <Input name="user_number_5" type="number" maxlength="2" value=this.state.user_number_5 onChange=this.inputHandler required></Input>
 <Label>6th number</Label>
 <Input name="user_number_6" type="number" maxlength="2" value=this.state.user_number_6 onChange=this.inputHandler required></Input>
 <Label>Number of draws:</Label>
 <Input name="draw_number" type="number" value=this.state.draw_number onChange=this.inputHandler required></Input>
 </InputWrapper>
 <Button type="submit" /*onClick=this.drawsHandler*/>Let's win!</Button>
 </InputField>
 )
 

You can do that using concat() and use Object Destructuring for cleaner code

const results = this.state; 
const numbers = results
this.setState(results:...results,numbers:numbers.concat([event.target.value])