get a random item from a list of items with property by React js

Question

i am trying to get a random item from a list. so far i managed to put my list in an array and i'm trying to get the item i need with a function but where i need it , it's undefined! i don't know where i am wrong!!!

i wanna see the result in this console log

 handleChange(event) {
    this.setState({value: event.target.value});
    var NewDictionary = this.Dictionary;
    console.log(Rand(NewDictionary));
  }

the whole code is here:

class Application extends React.Component{
  constructor(props) {
   super(props);
   this.state = {
     value:'option2',
     button:'submit',
   };
   this.Dictionary = {
     Salam:"Hi",
     khodafez:"Bye",
     are: "Yes",
     na: "No",
     shab: "Night",
     rooz: "Day",
   }
   this.handleChange = this.handleChange.bind(this);
   this.handleSubmit = this.handleSubmit.bind(this);
 }
 handleChange(event) {
    this.setState({value: event.target.value});
    var NewDictionary = this.Dictionary;
    console.log(Rand(NewDictionary));
  }
  handleSubmit(event) {
    this.setState({button: this.state.value});
    event.preventDefault();
  }

  render(){
    return(

  <form onSubmit={this.handleSubmit}>
  <div> {this.Dictionary.Salam}  </div>
  <div className="radio">
    <label>
      <input type="radio" value={this.Dictionary.Salam}
        checked={this.state.value === this.Dictionary.Salam}
        onChange={this.handleChange} />
        {this.Dictionary.Salam}
    </label>
  </div>
  <div className="radio">
    <label>
      <input type="radio" value="option2"
        checked={this.state.value === 'option2'}
        onChange={this.handleChange} />
      Option 2
    </label>
  </div>
  <div className="radio">
    <label>
      <input type="radio" value="option3"
        checked={this.state.value === 'option3'}
        onChange={this.handleChange} />
      Option 3
    </label>
  </div>
  <div className="radio">
    <label>
      <input type="radio" value="option4"
        checked={this.state.value === 'option4'}
        onChange={this.handleChange} />
        Option 4
    </label>
  </div>
  <button onClick={this.handleSubmit} className="btn btn-default" type="submit">{this.state.button}</button>
</form>

     )
   }
}
function Rand(NewDictionary){
  let i = NewDictionary.length - 1;
  const j = Math.floor(Math.random() * i);
  return NewDictionary[j];
}
ReactDOM.render(
  <Application />,
  document.getElementById('root')
);

Your dictionary is an Object, not an Array. Use Object.keys(NewDictionary) to get an array of its keys. — user5734311
– user5734311, Commented Sep 5, 2017 at 19:32

Chase DeAnda · Accepted Answer · 2017-09-05 19:36:36Z

1

It's because NewDictionary is an object and not an array, so trying to get an item by an index won't work. Instead, use Object.keys(NewDictionary) to create an array of keys, and then use the random index to get a random key.

function Rand(NewDictionary){
  const keys = Object.keys(NewDictionary);
  let i = keys.length - 1;
  const j = Math.floor(Math.random() * i);
  return NewDictionary[keys[j]];
}

answered Sep 5, 2017 at 19:36

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

get a random item from a list of items with property by React js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related