Unable to render state, but can console.log it - reactjs

Question

I have a state defined like this:
state = {
items: [
{id: 0, value: 0},
{id: 1, value: 0},
],
};
when I console.log(this.state.items[0].id) in the the constructor, I get the correct value.
But when I try to render it like this:
render() {
return (
<div>
<table>
<tr>
<th id="d0" onClick={(e)=>this.onClick(e)}>{this.state.items[0].id}</th>
....
It says "Cannot read property '0' of undefined"
Is the render happening before the state gets initialized, and therefore is undefined when it tries to render?
class App extends React.Component {
/**
* #param {object} props
*/
state = {
items: [
{ id: 0, value: 0 },
{ id: 1, value: 0 },
],
};
constructor(props) {
super(props);
console.log(this.state.items[0].id);
}
render() {
return (
<div>
<table>
<tbody>
<tr>
<th id="d0" onClick={(e) => this.onClick(e)}>th</th>
<th id="d1">h</th>
</tr>
</tbody>
</table>
</div>
);
}
onClick(e) {
this.setState({ day0: 6 });
}
}
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div class='react'></div>

Answer 1

Your state should be set within your constructor
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{ id: 0, value: 0 },
{ id: 1, value: 0 },
]
}
}
render() {
return (
<div>
<table>
<tr>
<th id="d0" onClick={(e)=>this.onClick(e)}>{this.state.items[0].id}</th>
</tr>
</table>
</div>
);
}
}

Answer 2

You are initializing the state incorrectly. States should be initialized inside the constructor in class based components. Please update the state initialization as :
class App extends React.Component {
/**
* #param {object} props
*/
constructor(props) {
super(props);
this.state = {
items: [
{ id: 0, value: 0 },
{ id: 1, value: 0 },
],
};
}
render() {
return (
<div>
<table>
<tbody>
<tr>
<th id="d0" onClick={(e) => this.onClick(e)}>{this.state.items[0].id}</th>
<th id="d1">h</th>
</tr>
</tbody>
</table>
</div>
);
}
onClick(e) {
this.setState({ day0: 6 });
}
}
ReactDOM.render(<App />, document.querySelector('.react'));