React basic list using class components not working - reactjs

Question

New to React and trying to follow this page: https://facebook.github.io/react/docs/lists-and-keys.html
I have two components:
App.js
var React = require('react');
var NumberList = require('./NumberList');
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div>
<h1>Hello {this.props.name} from React!</h1>
<NumberList numbers={[1,2,3,4,5]} />
</div>;
}
}
module.exports = App;
NumberList.js
var React = require('react');
class NumberList extends React.Component {
constructor(props) {
super(props);
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
}
render() {
return <ul>test {listItems}</ul>;
}
}
module.exports = NumberList;
index.js
var React = require('react');
var ReactDOM = require('react-dom');
var App =
require('./components/App');
ReactDOM.render(
<App name="Sarah"/>,
document.getElementById('app')
);
I am getting a Javascript error:
listItems not defined
Do I need to store listItems as a state somehow?
Update
I tried changing:
return <ul>test {listItems}</ul>;
to
return <ul>test {this.listItems}</ul>;
I just get a blank "test" word and no list items...

Answer 1

Because in your constructor, if you write
const listItems = numbers.map((number) =>
<li>{number}</li>
);
then listItems is a local variable, the render function cannot aware of it.
if you want to access via this.listItems in render, you will need to write:
this.listItems = numbers.map((number) =>
<li>{number}</li>
);
but this may not work because when your component is being constructed, the props may not have been passed down yet. You will need to write this in componentWillReceiveProps
Usually you can just write the .map in the render function, and don't forget the key:
render() {
return (
<ul>
{this.props.numbers.map((number, i) =>
<li key={i}>{number}</li>)}
</ul>
)
}
If you don't like this style, simply extract this to a function or in a variable, for example:
render() {
const listItems = this.props.numbers.map((number, i) =>
<li key={i}>{number}</li>
)
return (
<ul>{listItems}</ul>
)
}