Multipart form with React - Text, date, number, image

I am trying to create the final stage of a multitype form that I have created in React. I think I am close to creating a handleSubmit method for posting my multipart form data to my backend database however I am getting the below erros messages relating to CORS issues.

Am I going about adding to my Redux store and my backend the right way? Do I need to add some sort of parser to my service “createDiveSpot” method to seperate the text, numbers and images?

error messages when rendering page

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

error on console
enter image description here

    // state for the current field value
    const [spot, setSpot] = useState({
        diveLocation: "",
        diveRegionID: "",
        diveTypeID: "",
        diveSpotDescription: "",
        diveSpotPhotos: "",
        error: ''
    });

    // all onChange functions do the exact same thing, so you only need one
    // pass to a component like onChange={handleChange('typeID')}
    const handleChange = (property) => (e) => {
        setSpot({
            // override the changed property and keep the rest
            ...spot,
            [property]: e.target.value,
        });
    }

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

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

    const handleSubmitDiveSpot = () => {

        const diveSpot = {
            diveLocation: spot.diveLocation || undefined,
            diveRegionID: spot.diveRegionID || undefined,
            diveSpotTypeID: spot.diveSpotTypeID || undefined,
            diveSpotDescription: spot.diveSpotDescription || undefined,
            diveSpotPhotos: spot.diveSpotPhotos || undefined
        }

        // do some stuff with the form
        createDiveSpot(diveSpot).then((data) => {
            if (data.error) {
                setSpot({ ...spot, error: data.error})
            } else {
                setSpot({ ...spot, error: '', open: true})
            }
        })
        // do we need to save this to the backend? or just to redux?
        dispatch(addDiveSpot(spot));
        }

    const classes = useStyles;

    return (

        // <AppBar title="Enter your dive details"></AppBar>
        <form className="diveSpotForm" method="POST" encType="multipart/form-data" onSubmit={handleSubmitDiveSpot}>

            <>
                <Grid container spacing={3}
                      direction="row"
                      justify="center"
                      alignItems="center">
                    <Grid item xs={4}>
                    <FormControl className={classes.formControl}>
                        <PopulateDropdown
                            dataList={diveTypeList}
                            titleProperty={"diveType"} // option label property
                            valueProperty={"diveTypeID"} // option value property
                            name="diveType"
                            placeholder="Dive Type"
                            label="Select Dive Type"
                            value={spot.diveTypeID}
                            onChange={handleChange("diveTypeID")}/>
                    </FormControl>
                    </Grid>
                    <br />
                    <Grid item xs={4}>
                        <FormControl className={classes.formControl}>
                            <PopulateDropdown
                                dataList={regionList}
                                titleProperty={"diveRegion"} // option label property
                                valueProperty={"diveRegionID"} // option value property
                                name="diveRegion"
                                placeholder="Dive Region"
                                label="Select Region"
                                value={spot.diveRegionID}
                                onChange={handleChange("regionID")}/>
                        </FormControl>
                    </Grid>
                    <br />
                    <Grid item xs={4}>
                        <TextField
                            label="diveLocation"
                            placeholder="Dive Location"
                            name="diveLocation"
                            margin="normal"
                            value={spot.diveLocation}
                            onChange={handleSubmitDiveSpot("diveLocation")}/>
                    </Grid>
                    <br />
                    <Grid item xs={10}>
                        <FormControl fullWidth className={classes.margin}>
                            <TextField
                                label="Description"
                                name="diveSpotDescription"
                                value={spot.diveSpotDescription}
                                onChange={handleSubmitDiveSpot("diveSpotDescription")}
                                multiline
                                rowsMax={6}/>
                        </FormControl>
                    </Grid>
                    <br />
                    <Grid item xs={12}>
                        <FormControl fullWidth className={classes.margin}>
                            <label for="photos">Photo Upload</label>
                            <input
                                type="file"
                                name="photo"
                                value={spot.diveSpotPhotos}
                                onChange={handleSubmitDiveSpot("diveSpotPhotos")}/>
                        </FormControl>
                    </Grid>
                    <br />
                    <Grid item xs={3}>
                        <Button variant="primary" type="submit">
                            Submit</Button>
                        <br />
                    </Grid>
                </Grid>
            </>
        </form>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.