React state with value of array, for multi checkbox values, mutate outside and after setState() to number

Question

I'm new in react so excuse me if I looked repetitive but i couldn't find an answer online.
I'm working on react multi value checkbox form by pushing the checked value inside stat array, it's seem working well inside the setState function with first checked, when logged it in the console I received an array whit the new added value.
but directly after the setState() the array value changed to 1 !! and of curse I can't use any high-order functions anymore.
So any idea why that's happen, and how I can fix it ?!
Please find screenshot of the code

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nationality: [],
    };
    this.handelChecked = this.handelChecked.bind(this);
  }

  handelChecked(e) {
    let { name, value, checked } = e.target;
    console.log(name, value, checked);
    console.log(this.state.nationality);
    if (checked) {
      this.setState({
        nationality: this.state.nationality.push(value),
      });
    }
    console.log(this.state.nationality);
  }
  render() {
    console.log(this.state.nationality);

    return (
      <>
        <form>
          <label>Nationality</label>
          <br />
          <label>
            <input
              type='checkbox'
              name='nationality'
              value='Japaneses'
              onChange={this.handelChecked}
            />
            Japaneses
          </label>
          <br />
          <label>
            <input
              type='checkbox'
              name='nationality'
              value='Dutch'
              onChange={this.handelChecked}
            />
            Dutch
          </label>
          <br />
          <label>
            <input
              type='checkbox'
              name='nationality'
              value='Egyptian'
              onChange={this.handelChecked}
            />
            Egyptian
          </label>
        </form>
        <div>
          <br />
          <h4>Nationality:</h4>
          <p>{this.state.nationality}</p>
        </div>
      </>
    );
  }
}

export default Test;

1) Please post code as text, not images. 2) You're mutating state by calling this.state.nationality.push(). 3) State updates are async, so even if it updated correctly, the console.log immediately after the update will not have the updated value available. — Brian Thompson
– Brian Thompson, Commented May 20, 2020 at 19:05
push returns a number. And please post code as code, not as a picture - let alone a link to a picture. — Robin Zigmond
– Robin Zigmond, Commented May 20, 2020 at 19:05

Alaa · Accepted Answer · 2020-05-20 20:12:40Z

1

I fix the handelChecked() as following:

handelChecked(e) {
let { name, value, checked } = e.target;
if (checked) {
  this.setState({
    nationality: [...this.state.nationality, value],
  });
}

answered May 20, 2020 at 20:12

Alaa

134 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Khabir · Accepted Answer · 2020-05-20 19:52:18Z

0

Hi Please check the example below. I used setState with prevState, that is the main change for working the code. I also do one optional change that is, I removed this.handelChecked = this.handelChecked.bind(this); from constructor and use arrow function.

import React, {Component} from 'react';

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nationality: [],
        };
    }

    handelChecked = (e) => {
        let {name, value, checked} = e.target;
        console.log(this.state.nationality);
        if (checked) {
            this.setState(prevState => {
                prevState.nationality.push(value);
                return{
                    nationality: prevState.nationality
                }
            });
        }
        console.log(this.state.nationality);
    };

    render() {
        return (
            <>
                <form>
                    <label>Nationality</label>
                    <br/>
                    <label>
                        <input
                            type='checkbox'
                            name='nationality'
                            value='Japaneses'
                            onChange={this.handelChecked}
                        />
                        Japaneses
                    </label>
                    <br/>
                    <label>
                        <input
                            type='checkbox'
                            name='nationality'
                            value='Dutch'
                            onChange={this.handelChecked}
                        />
                        Dutch
                    </label>
                    <br/>
                    <label>
                        <input
                            type='checkbox'
                            name='nationality'
                            value='Egyptian'
                            onChange={this.handelChecked}
                        />
                        Egyptian
                    </label>
                </form>
                <div>
                    <br/>
                    <h4>Nationality:</h4>
                    <p>{this.state.nationality}</p>
                </div>
            </>
        );
    }
}

export default Test;

answered May 20, 2020 at 19:52

Khabir

5,8781 gold badge26 silver badges38 bronze badges

5 Comments

Alaa Over a year ago

thanks Khabir, it's work but duplicating the value, i got [Dutch, Dutch, Egyptian, Egyptian], I fix it as following nationality: [...this.state.nationality, value],

Alaa Over a year ago

handelChecked(e) {     let { name, value, checked } = e.target;     if (checked) {       this.setState({         nationality: [...this.state.nationality, value],       });     }   }

Khabir Over a year ago

@Alaa, Why you did undo for Answer? Is there anything wrong?

Alaa Over a year ago

I didn't. I maybe by mistake

Khabir Over a year ago

Oh no problem, I thought I had something wrong in my code. Thank you so much

Collectives™ on Stack Overflow

React state with value of array, for multi checkbox values, mutate outside and after setState() to number

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related