I'm trying to create a new random number which will be set as state after a method. It works perfectly on refresh, but I can't 'generate' a new number after the button click.

Here's my code at the moment:

var QuizContainer = React.createClass({

  randomNumber: function(){
    return Math.floor((Math.random() * Data.length) + 0);
  },

  getInitialState: function(){
    var rand = this.randomNumber();
    return {
      answerList: Data[rand].answer,
      answerQuestion: Data[rand].question,
      correctAnswer: Data[rand].correct,
      score: 0,
      timer: 30
    }
  }, 

  success: function(){
    this.setState({score: this.state.score + 1})
  },

  fail: function(){
    this.setState({score: 0})
    this.getInitialState();
  },

  handleClick: function(child){
    child.props.singleAnswer == this.state.correctAnswer ? this.success() : this.fail()
  },

  render: function(){
    return(
      <div>
        <Timer timer={this.state.timer} />
        <Score currentScore={this.state.score} />
        <QuestionContainer answerQuestion={this.state.answerQuestion} />
        <ButtonContainer onClick={this.handleClick} correctAnswer={this.state.correctAnswer} answerList={this.state.answerList} />
      </div>
    )
  }

})

module.exports = QuizContainer;

If anyone's able to help I'd be very grateful! Thanks!

I'm trying to create a new random number which will be set as state after a method. It works perfectly on refresh, but I can't 'generate' a new number after the button click.

Here's my code at the moment:

var QuizContainer = React.createClass({

  randomNumber: function(){
    return Math.floor((Math.random() * Data.length) + 0);
  },

  getInitialState: function(){
    var rand = this.randomNumber();
    return {
      answerList: Data[rand].answer,
      answerQuestion: Data[rand].question,
      correctAnswer: Data[rand].correct,
      score: 0,
      timer: 30
    }
  }, 

  success: function(){
    this.setState({score: this.state.score + 1})
  },

  fail: function(){
    this.setState({score: 0})
    this.getInitialState();
  },

  handleClick: function(child){
    child.props.singleAnswer == this.state.correctAnswer ? this.success() : this.fail()
  },

  render: function(){
    return(
      <div>
        <Timer timer={this.state.timer} />
        <Score currentScore={this.state.score} />
        <QuestionContainer answerQuestion={this.state.answerQuestion} />
        <ButtonContainer onClick={this.handleClick} correctAnswer={this.state.correctAnswer} answerList={this.state.answerList} />
      </div>
    )
  }

})

module.exports = QuizContainer;

If anyone's able to help I'd be very grateful! Thanks!

• javascript
• random
• numbers
• reactjs

Share Improve this question Follow asked Jan 26, 2015 at 0:22 BoyswanBoyswan 22411 gold badge44 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

getInitialState returns an object. You're just calling this.getInitialState() and throwing away the object. To update the state you need to call this.setState

  fail: function(){
    this.setState(this.getInitialState());
  },

There's no magic wrapper around getInitialState, the function just does what you tell it to do, and it's used by react when instancing your ponent.

I removed this.setState({score: 0}) because it's provided by your getInitialState.

---

Also, ButtonContainer should be passing the answer up, not updating its props and passing itself to the onClick callback. If you're reading props other than your own, something is wrong.

See this example: https://jsfiddle/danyaljj/1cban4oy/

var colors = ['silver', 'gray', 'red', 'maroon', 'yellow', 'olive', 'lime', 'green', 
              'aqua', 'teal', 'blue', 'navy', 'fuchsia', 'purple']; 

var category = {"cat": "1"}; 

class SampleApplication extends React.Component {
  constructor(props) {
    super(props);
    this.state = { BKColor: 'red', question: {}};
  }
  render() {
    var rand = Math.floor((Math.random() * 8)); 
    return (
        <table> 
            <tr>
                <th style={{ backgroundColor: colors[rand] }}>Month</th>
                <th>{colors[1]}</th> 
              </tr>
              <tr>
                <td>January {rand}</td>
                <td>$100</td>
              </tr>
              <tr>
                <td>February</td>
                <td>$80</td>
              </tr>
        </table> 
        ); 
  }
}

React.render(<SampleApplication />, document.body);

I generate a table with one cell colored randomly.