this.props.firstCard返回未定义

Question

I'm new to react.js and I'm trying to math.random a number and put it in this.props.firstCard property, but it returns undefined. I tried some variables but only result is undefined or syntax error. Code:

handleClick() {
let firstCard = this.state.isFirstCardChosen;
function chooseCard() {
  return Math.floor(Math.random() * (80 - 1) + 1);
}
if (firstCard == false) {
  this.props.firstCard = chooseCard;
  console.log(this.props.firstCard);
}
}

What's wrong with this one? Thanks in advance.

Answer 1

I'm going to hazard a guess and suggest that

if:

the problem isn't just one caused by the fact you are trying to mutate props ( props are immutable ).

and:

You're using ES2015 class syntax

then

the problem may be that your handleClick method isn't properly bound to the component state so the call to this.props returns undefined .

To solve this you can bind the handleClick in the constructor as follows:

constructor (props){
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

Answer 2

As everyone else has said the props is immutable. Also make sure you are setting props correctly and binding your handleClick function in your constructor ie:

constructor(props) {
    super(props);
    his.handleClick = this.handleClick.bind(this);
}