CODEWITHSUNDEEP
javascriptreactjs
Leocete
Leocete

Reputation: 305

How I can push my state elements to the state array?

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

Upvotes: 0

Views: 70

Answers (1)

Maheer Ali
Maheer Ali

Reputation: 36594

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])}}

Upvotes: 1

Related Questions