setState in React results in Uncaught ReferenceError - reactjs

Question

I have an very simple piece of React code as im trying to understand the concepts.
In the code below if I comment out the setState function I can see that selectNumber runs when I expect it too. However when I try and change the state's numbersBurnt value I get an error.
class Game extends React.Component {
state = {
numbersBurnt: [1]
};
selectNumber = (clickedNumber) => {
console.log('This was run');
this.setState((prevState, props) => {
numbersBurnt = [1];
});
};
render() {
return /* Something */;
}
}
Error: Uncaught ReferenceError: numbersBurnt is not defined
UPDATE: Here is the full code:
function Stars(props) {
const starsRandNo = Math.ceil(Math.random()*9);
let stars = [];
for (let i=0; i < starsRandNo; i++) {
stars.push(<span key={i} className="star">{i+1}</span>)
}
return <div>{stars}</div>;
}
function StarsBtn(props) {
const starsBtnClick = () => {
alert('was clicked');
}
return <button onClick={starsBtnClick}>Change no of stars</button>
}
function NumberOptions(props) {
const no = 9;
let numbers = [];
const burnTest = (i) => {
if (props.numbersBurnt.indexOf(i) >= 0) {
return "number-options number-options--burnt";
} else {
return "number-options";
}
}
for (let i=0; i < no; i++) {
numbers.push(<span className={burnTest(i)}
onClick={() => props.selectNumber(i+1)} >{i+1}</span>)
}
return <div>{ numbers }</div>;
}
class Game extends React.Component {
state = {
numbersBurnt: [1]
};
selectNumber = (clickedNumber) => {
console.log(this.state.numbersBurnt);
this.setState((prevState, props) => {
numbersBurnt: [2]
}, () => { console.log(this.state.numbersBurnt)});
console.log(this.state.numbersBurnt);
};
render() {
return <div>
<Stars />
<br />
<StarsBtn />
<br />
<br />
<NumberOptions numbersBurnt={this.state.numbersBurnt}
selectNumber={this.selectNumber} />
</div>;
}
}
ReactDOM.render(
<Game />,
mountNode
);

Answer 1

You try it.
React state is specify in the constructor function.
class Game extends React.Component {
constructor(props){
super(props);
this.state = {
numbersBurnt: [1]
}
}
selectNumber = (clickedNumber) => {
console.log('This was run');
this.setState((prevState, props) => {
numbersBurnt: [1]
});
};
render() {
return /* Something */;
}
}
more simple.
class Game extends React.Component {
constructor(props){
super(props);
this.state = {
numbersBurnt: [1]
}
}
selectNumber = (clickedNumber) => {
console.log('This was run');
this.setState({
numbersBurnt: [1]
});
};
render() {
return /* Something */;
}
}
You can omit prevState, props.

Answer 2

In your setState , you should be using a : and not a =. Also remove the ; and the prevState and props in your setState as you are not making use of them
class Game extends React.Component {
state = {
numbersBurnt: [1]
};
selectNumber = (clickedNumber) => {
console.log('This was run');
this.setState({
numbersBurnt: [1]
}, () => { console.log(this.state.numbersBurnt)});
};
render() {
return /* Something */;
}
}
function Stars(props) {
const starsRandNo = Math.ceil(Math.random()*9);
let stars = [];
for (let i=0; i < starsRandNo; i++) {
stars.push(<span key={i} className="star">{i+1}</span>)
}
return <div>{stars}</div>;
}
function StarsBtn(props) {
const starsBtnClick = () => {
alert('was clicked');
}
return <button onClick={starsBtnClick}>Change no of stars</button>
}
function NumberOptions(props) {
const no = 9;
let numbers = [];
const burnTest = (i) => {
if (props.numbersBurnt.indexOf(i) >= 0) {
return "number-options number-options--burnt";
} else {
return "number-options";
}
}
for (let i=0; i < no; i++) {
numbers.push(<span className={burnTest(i)}
onClick={() => props.selectNumber(i+1)} >{i+1}</span>)
}
return <div>{ numbers }</div>;
}
class Game extends React.Component {
state = {
numbersBurnt: [1]
};
selectNumber = (clickedNumber) => {
this.setState({
numbersBurnt: [2]
}, () => { console.log(this.state.numbersBurnt)});
};
render() {
return <div>
<Stars />
<br />
<StarsBtn />
<br />
<br />
<NumberOptions numbersBurnt={this.state.numbersBurnt}
selectNumber={this.selectNumber} />
</div>;
}
}
ReactDOM.render(
<Game />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>