Looping through the state object in React.js

Question

I have a state with 9 keys. I want each value of the keys to be a random number between 1-9 every time the app runs and all the values must be unique to each key. How can i some how go through each key in the object and give them a different number each time?

import React, { Component } from 'react'


class Grid extends Component {

constructor(props) {
    super(props)
    this.state = {
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        input7: '',
        input8: '',
        input9: '',
    };

    this.handleChange = this.handleChange.bind(this);
}

componentWillMount() {
    var numArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

    Object.keys(this.state).map((n)=> console.log(n));

}



handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
}


render() {
    return (
        <div className="content">
            <form className="grid">
                <label className="grid__container">
                    <input  name="input1" value={this.state.input1} onChange={this.handleChange} className="grid__container--item" />
                    <input  name="input2" value={this.state.input2} onChange={this.handleChange} className="grid__container--item" />
                    <input  name="input3" value={this.state.input3} onChange={this.handleChange} className="grid__container--item" />
                    <input  name="input4" value={this.state.input4} onChange={this.handleChange} className="grid__container--item" />
                    <input  name="input5" value={this.state.input5} onChange={this.handleChange} className="grid__container--item" />
                    <input  name="input6" value={this.state.input6} onChange={this.handleChange} className="grid__container--item" />
                    <input  name="input7" value={this.state.input7} onChange={this.handleChange} className="grid__container--item" />
                    <input  name="input8" value={this.state.input8} onChange={this.handleChange} className="grid__container--item" />
                    <input  name="input9" value={this.state.input9} onChange={this.handleChange} className="grid__container--item" />
                </label>
            </form>
        </div>
    );
}
}

 export default Grid;

As you can see in the componentWillMount lifecycle method i was attempting to iterate through the object but it just returned the keys in an array.

This can help you to generate random numbers: stackoverflow.com/a/25424785/2630817 — Just code
– Just code, Commented Jul 9, 2018 at 7:10
Why are you writing input again and again..just create a loop in render method and iterate over the no of times you want and assign different value to each state of input. — tarzen chugh
– tarzen chugh, Commented Jul 9, 2018 at 7:12

Community · Accepted Answer · 2018-07-10 12:06:08Z

1

You can randomly select the index using Math.floor(Math.random() * numArr.length) and then add that value to your state and then remove the value at that index from the array.

const state = {
  input1: '', input2: '', input3: '',
  input4: '', input5: '', input6: '',
  input7: '', input8: '', input9: '',
};

const numArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

const newState = Object.keys(state).reduce((acc, key) => {
  const index = Math.floor(Math.random() * numArr.length);
  const number = numArr.splice(index, 1)[0];

  return Object.assign({}, acc, {
    [key]: number
  });
}, {});

console.log(newState);

edited Jul 10, 2018 at 12:06

CommunityBot

11 silver badge

answered Jul 9, 2018 at 7:14

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Looping through the state object in React.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related