Im (very) new to react having come from a Java background. I’m attempting to refactor some current code to make use of Async and await.

The error is coming proper earlier than my render perform() (highlighted with *****) and am getting a “/src/App.js: Sudden token, anticipated “,” error and cant for the lifetime of me determine what’s going on. Ive tried messing round with } ) and ; and cant fairly monitor it down. Any assistance is appreciated.

import React, { Part } from “react”;
import { FixedSizeGrid } from “react-window”;

export default class App extends Part {
  constructor(props) {
    tremendous(props);

    this.state = {
      specialties: [],
      isLoaded: false,
      error: null
    };
  }

  async componentDidMount() {
    const response = await fetch (url)
    .then(response => response.json())
    .then(physique => {
      const specialties = physique.knowledge.specialties;
      return specialties;
    })
    .then(specialties => {
      return specialties.map(({ _id, identify }) => {
        return [_id, name];
      })


      .then(remodeled => {
        this.setState({
          specialties: remodeled,
          isLoaded: true,
          error: null
        });
      })

      .catch(error => {
        this.setState({
          specialties: [],
          isLoaded: true,
          error: error
         });
      });
    }




  render() {***********************right here 
    if (this.state.error) {
      return <span model={{ colour: "pink" }}>{this.state.error.message}</span>;
    }

    if (!this.state.isLoaded) {
      return "Loading...";
    }

    const ITEM_HEIGHT = 35;

    return (
      <FixedSizeGrid
        columnWidth={300}
        rowHeight={35}
        itemData={this.state.specialties}
        peak={ITEM_HEIGHT * this.state.specialties.size}
        width={600}
        itemSize={() => ITEM_HEIGHT}
        columnCount={2}
        rowCount={this.state.specialties.size}
      >
        {SpecialtyYielder}
      </FixedSizeGrid>
    );
  }
}

const SpecialtyYielder = ({ columnIndex, rowIndex, knowledge, model }) => {
  return (
    <div
      model={{
        ...model,
        backgroundColor:
          (rowIndex + columnIndex) % 2 ? "beige" : "antiquewhite",
        show: "flex",
        alignItems: "middle",
        justifyContent: "middle"
      }}
    >
      {knowledge[rowIndex][columnIndex]}
    </div>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.manufacturing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.manufacturing.min.js"></script>