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>