Q:

React: _this.state is undefined

I wrote the following snippet:
export class Kurse extends React.Component {
  constructor(props) {
    super(props);

    this.state = {termineFreiburg: [
      {date: "21.02.2019", free: 10}, 
      {date: "02.05.2018", free: 0}, 
      {date: "13.03.2018", free: 10}, 
      {date: "04.07.2018", free: 12}, 
      {date: "05.08.2018", free: 12}
    ],
                termineKarlsruhe:[
      {date: "09.03.2019", free: 2},
      {date: "12.01.2018", free: 5}
    ]}
  }

  stadt = this.props.location.stadt;

  listItemsFreiburg = this.state.termineFreiburg.map((termin) =>
  <p><Link to={{pathname: "/bookCourse", datum: termin.date, stadt: this.props.location.stadt}}><Button>{termin.date}   Freie Plätze:  {(termin.free > 0)?termin.free:'ausgebucht'}</Button></Link></p>);

  listItemsKarlsruhe = this.state.termineKarlsruhe.map((termin) =>
  <p><Link to={{pathname: "/bookCourse", datum: termin.date, stadt: this.props.location.stadt}}><Button>{termin.date}   Freie Plätze:   </Button></Link></p>);

  render() {
    return(
      <div>
        <h2>Wähle Deinen Wunschtermin für einen Kurs in {this.props.location.stadt}</h2>
        {(this.props.location.stadt === 'Freiburg') ? this.listItemsFreiburg : this.listItemsKarlsruhe}
      </div>
    );
  }
}

export default Kurse;

Expected result:
I expect that the dates will appear on the website (the app page).
Actual result:
I get "_this.state is not defined" with "constructor(props)" being highlighted.
As soon as I take the snippet with the dates out of the constructor all works fine!?
Any help? Or hints?

A:

Class field initializers like the one you're using to create listItemsFreiburg and such are executed before the code in the constructor (they're effectively inserted into the constructor at the beginning after the call to super). E.g., this:
class Example {
    constructor(...args) {
        super(...args);
        this.answer = 42;
    }

    question = "Life, the Universe, and Everything";
}

is effectively this:
class Example {
    constructor(...args) {
        super(...args);
        this.question = "Life, the Universe, and Everything";
        this.answer = 42;
    }
}

Notice the order. Details in the class fields proposal.
That's why state is undefined as of when you're calling map to create listItemsFreiburg and the other one.
Either use a field initializer to create your state, or move your class field initializers into the constructor.
However, it seems odd to build those at construction time, given that they're based on state. I'd move them into render as locals, or at least update them when state changes.

