CODEWITHSUNDEEP
reactjsloopsstate
Chuks G
Chuks G

Reputation: 39

Looping through the state object in React.js

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.

Upvotes: 0

Views: 6094

Answers (1)

Hassan Imam
Hassan Imam

Reputation: 22534

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

Upvotes: 1

Related Questions