State array not populating in React

Question

I am trying to do a simple operation to create an array in React and set it equal to a state object. Anyone know why state.countState is being populated with "null" for each array element? I think I'm missing something very simple here...

class DisplaySort extends Component {
  constructor(props) {
    super(props);
    this.state = {
      array: [5, 4, 3, 2, 1],
      countState: [],
    };
    this.sort = this.sort.bind(this);
  }

 render() {
    return (
        <div className="buttons">
          <button onClick={this.sort}>Sort</button>
        </div>
    );
  }

sort(e) {
    let data = this.state.array;
    let arr = [...data];
    let min = Math.min(...arr);
    let max = Math.max(...arr);

    let i = min,
      j = 0,
      len = arr.length,
      count = [];

    for (i; i <= max; i++) {
      count[i] = 0;
    }

    for (i = 0; i < len; i++) {
      count[arr[i]] += 1;
    }

    this.setState({ countState: count });

};

What should sort do? It doesn't appear to be sorting the array. — Ramesh Reddy
– Ramesh Reddy, Commented Jul 5, 2020 at 20:11
This is a truncated version of my application for simplicity. I've narrowed down the (or at least a) problem down to the fact that this returns an array of "null" for count — Jerry123
– Jerry123, Commented Jul 5, 2020 at 20:30

Ramesh Reddy · Accepted Answer · 2020-07-05 20:38:18Z

1

Math.min and Math.max doesn't take an array as a parameter.

You can spread the array and pass the values:

const bla = [1,0,-1];

console.log(Math.min(bla)) // logs NaN

console.log(Math.min(...bla)) // logs -1

Update

In this for loop

for (i; i <= max; i++) {
   count[i] = 0;
}

you're looping from 1 to 5 and in each iteration count[i] is set to 0. So that leaves out the first index(0). If you log count after this loop you'll see that the first element is null.

edited Jul 5, 2020 at 20:38

answered Jul 5, 2020 at 20:29

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

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

2 Comments

Jerry123 Over a year ago

Even after adding the spread operator the count array is still populated with "null" elements

Ramesh Reddy Over a year ago

@Jerry123 updated my answer, you have a logical error.

Collectives™ on Stack Overflow

State array not populating in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related