Building a front-end form to handle co-ordinates being inserted into a GeoJSON

[james_g2001]

I am trying to build a form component that handles putting longitude and latitude into a geoJSON. I have the backend API working correctly and I want to get the geojson into the format below so it inserts into my postgres db.

I am currently getting a lexical declaration error flagging up due to the way I am trying to get the coordinates into the geojson format. Am I going about this in the right way in terms of getting the geoJson coordinates in an array?

ReferenceError: can't access lexical declaration 'school' before initialization
DiveSchoolForm
.....oject/SustainableScuba/WebApp/sustainable-scuba-web-app/src/components/school/DiveSchoolForm.component.js:43

  40 |     diveSchoolGeoLong: ``,
  41 |     diveSchoolGeoLat: ``,
  42 |     diveSchoolGeo: {
> 43 |         coordinates: [school.diveSchoolGeoLong, school.diveSchoolGeoLat]
     | ^  44 |     },
  45 |     error: ``
  46 | });

forms

const DiveSchoolForm = (props) => {

  ..............

    // state for the current field value
    const [school, setSchool] = useState({
        diveSchoolName: ``,
        diveSchoolLocation: ``,
        diveRegionID: ``,
        diveSchoolGeoLong: ``,
        diveSchoolGeoLat: ``,
        diveSchoolGeo: {
            coordinates: [diveSchoolGeoLong, diveSchoolGeoLat]
        },
        error: ``
    });

    const handleChange = (property) => (e) => {
        setSchool({
            // override the changed property and keep the rest
            ...school,
            [property]: e.target.value,
        });
    }

    const handleChangeInt = (property) => (e) => {
        setSchool({
            // override the changed property and keep the rest
            ...school,
            [property]: parseInt(e.target.value),
        });
    }

    // get access to dispatch
    const dispatch = useDispatch();

    // useEffect with an empty dependency array is the same as componentDidMount
    useEffect(() => {
        dispatch(requireDiveSpotData());
        dispatch(requireFieldData());
    }, [])

    function handleSubmitDiveSchool(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault();
        const formData = new FormData();
        formData.append("diveSchoolName", school.diveSchoolName);
        formData.append("diveSchoolLocation", school.diveSchoolLocation);
        formData.append("diveRegionID", school.diveRegionID);
        formData.append("diveSchoolGeo", school.diveSchoolGeo);
        const config = {
            headers: {
                'content-type': 'multipart/form-data'
            }
        };
        axios.post("http://localhost:5002/api/diveschool/creatediveschool", formData, config);
    }

    const classes = useStyles();

    return (
        <>
            <div className="diveLogFormContainer">
                <Grid item xs={12}>
                    <Typography
                        variant="h3"
                        align="left"
                        color="textSecondary"
                        paragraph>
                        Dive School Form
                    </Typography>
            <form className="diveSchoolForm" method="POST" encType="multipart/form-data" onSubmit={handleSubmitDiveSchool}>
                <Grid container spacing={3}
                      direction="row"
                      justify="center"
                      alignItems="center">
                    <Grid item xs={5}>
                            <TextField
                                id="standard-adornment-amount"
                                label="diveSchoolName"
                                value={school.diveSchoolName}
                                onChange={handleChange("diveSchoolName")}
                                rowsMax={1}/>
                    </Grid>
                    <Grid item xs={5}>
                            <TextField
                                id="standard-adornment-amount"
                                label="diveSchoolLocation"
                                value={school.diveSchoolLocation}
                                onChange={handleChange("diveSchoolLocation")}
                                rowsMax={1}/>
                    </Grid>
                    <Grid item xs={5}>
                            <PopulateDropdown
                                dataList={regionList}
                                titleProperty={"diveRegion"}
                                valueProperty={"diveSRegionID"}
                                name="diveRegion"
                                label="Select dive region"
                                value={school.diveRegionID}
                                onChange={handleChangeInt("diveRegionID")}/>
                    </Grid>
                    <br />
                    <Grid item xs={5}>
                            <TextField
                                id="standard-adornment-amount"
                                label="diveSchoolGeo"
                                value={school.diveSchoolGeoLong}
                                onChange={handleChange("diveSchoolGeoLong")}/>
                    </Grid>
                    <br />
                    <Grid item xs={5}>
                        <TextField
                            id="standard-adornment-amount"
                            label="diveSchoolGeo"
                            value={school.diveSchoolGeoLat}
                            onChange={handleChange("diveSchoolGeoLat")}/>
                    </Grid>
                    <br />
                    <Grid item xs={3}>
                        <Button variant="primary" type="submit">
                            Submit</Button>
                        <br />
                    </Grid>
                </Grid>
            </form>
          </Grid>
        </div>
        </>
    )
}