Form in React + Formik + Material Ui (dialog + stepper) - reactjs

Question

My form worked 2 days ago when i didn't implement material UI with dialog and stepper. All the data was sent to the database.
Now i did it, It doesn't want to send at all, i don't even have a mistake in the console or network tab in dev tools. You'll find below at first what that doesnt work. In second where that work.
Thanks a lot in advance.
import { Formik, Form, Field } from 'formik';
import { makeStyles, useTheme } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import Dialog from '#material-ui/core/Dialog';
import DialogContent from '#material-ui/core/DialogContent';
import DialogTitle from '#material-ui/core/DialogTitle';
import MobileStepper from '#material-ui/core/MobileStepper';
import KeyboardArrowLeft from '#material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '#material-ui/icons/KeyboardArrowRight';
import axios from 'axios';
import Tools from './Tools';
import Technos from './Technos';
import Clients from './Clients';
import Managers from './Managers';
import Collaborators from './Collaborators';
const validate = (values) => {
const errors = {};
if (values.project_name === '') {
errors.project_name = 'Please choose at least a project name';
} else if (values.end_date < values.start_date) {
errors.end_date = 'The end date has to be after the start date';
}
return errors;
};
const useStyles = makeStyles(() => ({
steps: {
maxWidth: 400,
flexGrow: 1,
},
ModalDialog: {
height: '682px',
width: '683px',
},
}));
const CreateProject = () => {
const [tools, setTools] = useState([]);
const [toolsSelected, setToolsSelected] = useState([]);
const [newTool, setNewTool] = useState('');
const [technos, setTechnos] = useState([]);
const [technosSelected, setTechnosSelected] = useState([]);
const [newTechno, setNewTechno] = useState('');
const [clients, setClients] = useState([]);
const [clientSelected, setClientSelected] = useState();
const [newClient, setNewClient] = useState('');
const [collaborators, setCollaborators] = useState([]);
const [collaboratorsSelected, setCollaboratorsSelected] = useState([]);
const [managers, setManagers] = useState([]);
const [manager, setManager] = useState();
const [projectNameExist, setProjectNameExist] = useState(false);
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const [activeStep, setActiveStep] = React.useState(0);
const submitting = (values, actions) => {
const data = { ...values };
data.ClientId = parseInt(clientSelected, 10);
data.Tools = toolsSelected;
data.Technos = technosSelected;
data.ManagerId = manager;
data.Collaborators = collaboratorsSelected;
axios({
method: 'post',
url: 'http://localhost:5000/api/projects',
data,
})
.then(() => actions.setSubmitting(false))
// .then(() => history.push('/'))
.catch((err) => {
if (err.response.status === 409) {
setProjectNameExist(true);
}
});
};
useEffect(() => {
axios
.get('http://localhost:5000/api/tools')
.then((res) => res.data)
.then((data) => setTools(data));
}, []);
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<Formik
validate={validate}
validateOnChange={false}
validateOnBlur={false}
onSubmit={submitting}
initialValues={{
project_name: '',
start_date: undefined,
end_date: undefined,
teams_link: '',
number_sprints: undefined,
duration_sprints: undefined,
description: '',
time_budget_type: undefined,
project_type: undefined,
signed: undefined,
chance_winning: 0,
}}
>
{({ errors }) => (
<Form id="formCreateProject">
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Create Project
</Button>
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog">
<DialogTitle id="form-dialog">Create a project</DialogTitle>
<div className={classes.ModalDialog}>
<DialogContent>
{activeStep === 0 ? (
<div style={{ visibility: activeStep !== 0 ? 'hidden' : '' }}>
<label htmlFor="project_name">Project Name:</label>
<Field
type="text"
id="project_name"
name="project_name"
placeholder="Your project name"
/>
{errors.project_name && <p>{errors.project_name}</p>}
{projectNameExist ? <p style={{ color: 'white' }}>This project name already exist</p> : ''}
<label htmlFor="project_type">Project type:</label>
<Field name="project_type" id="project_type" as="select">
<option value="">--Please choose an option--</option>
<option value="Development">Development</option>
<option value="Design">Design</option>
<option value="Cybersecurity">Cybersecurity</option>
<option value="Cloud">Cloud</option>
</Field>
<Clients
clients={clients}
clientSelected={clientSelected}
newClient={newClient}
setNewClient={setNewClient}
setClientSelected={setClientSelected}
setClients={setClients}
/>
<Managers
managers={managers}
setManagers={setManagers}
setManager={setManager}
/>
<label htmlFor="signed">Is the contract signed?</label>
<Field name="signed" id="signed" as="select">
<option value="">--Please choose an option--</option>
<option value="0">False</option>
<option value="1">True</option>
</Field>
</div>
) : '' }
{activeStep === 1 ? (
<div style={{ visibility: activeStep !== 1 ? 'hidden' : '' }}>
Step 2
<label htmlFor="description">Description:</label>
<Field
type="text"
id="description"
name="description"
placeholder="Short description of the project, what was sold, what are the expectations of the client?"
rows="4"
cols="50"
/>
<label htmlFor="teams_link">Teams link:</label>
<Field
type="text"
id="teams_link"
name="teams_link"
placeholder="Your teams link"
/>
</div>
) : '' }
{activeStep === 2 ? (
<div style={{ visibility: activeStep !== 2 ? 'hidden' : '' }}>
ddsdsds
</div>
) : '' }
{activeStep === 3 ? (
<div style={{ visibility: activeStep !== 3 ? 'hidden' : '' }}>
<Tools
tools={tools}
toolsSelected={toolsSelected}
newTool={newTool}
setNewTool={setNewTool}
setToolsSelected={setToolsSelected}
setTools={setTools}
/>
<Technos
technos={technos}
technosSelected={technosSelected}
newTechno={newTechno}
setNewTechno={setNewTechno}
setTechnosSelected={setTechnosSelected}
setTechnos={setTechnos}
/>
</div>
) : '' }
{activeStep === 4 ? (
<div style={{ visibility: activeStep !== 4 ? 'hidden' : '' }}>
Step 5
<Collaborators
collaborators={collaborators}
setCollaborators={setCollaborators}
collaboratorsSelected={collaboratorsSelected}
setCollaboratorsSelected={setCollaboratorsSelected}
/>
<button type="submit">
Create
</button>
</div>
) : '' }
</DialogContent>
</div>
<MobileStepper
variant="dots"
steps={5}
position="static"
activeStep={activeStep}
className={classes.steps}
nextButton={(
<Button size="small" onClick={handleNext} disabled={activeStep === 4}>
Next
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
</Button>
)}
backButton={(
<Button size="small" onClick={handleBack} disabled={activeStep === 0}>
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
Back
</Button>
)}
/>
</Dialog>
</Form>
)}
</Formik>
);
};
export default CreateProject;```
The previous component where that worked is here:
```import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { Formik, Form, Field } from 'formik';
import axios from 'axios';
import Tools from './Tools';
import Technos from './Technos';
import Clients from './Clients';
import Managers from './Managers';
import Collaborators from './Collaborators';
const validate = (values) => {
const errors = {};
if (values.project_name === '') {
errors.project_name = 'Please choose at least a project name';
} else if (values.end_date < values.start_date) {
errors.end_date = 'The end date has to be after the start date';
}
return errors;
};
const NewProject = () => {
const history = useHistory();
const [tools, setTools] = useState([]);
const [toolsSelected, setToolsSelected] = useState([]);
const [newTool, setNewTool] = useState('');
const [technos, setTechnos] = useState([]);
const [technosSelected, setTechnosSelected] = useState([]);
const [newTechno, setNewTechno] = useState('');
const [clients, setClients] = useState([]);
const [clientSelected, setClientSelected] = useState();
const [newClient, setNewClient] = useState('');
const [collaborators, setCollaborators] = useState([]);
const [collaboratorsSelected, setCollaboratorsSelected] = useState([]);
const [managers, setManagers] = useState([]);
const [manager, setManager] = useState();
const [projectNameExist, setProjectNameExist] = useState(false);
const submitting = (values, actions) => {
const data = { ...values };
data.ClientId = parseInt(clientSelected, 10);
data.Tools = toolsSelected;
data.Technos = technosSelected;
data.ManagerId = manager;
data.Collaborators = collaboratorsSelected;
axios({
method: 'post',
url: 'http://localhost:5000/api/projects',
data,
})
.then(() => actions.setSubmitting(false))
.then(() => history.push('/'))
.catch((err) => {
if (err.response.status === 409) {
setProjectNameExist(true);
}
});
};
useEffect(() => {
axios
.get('http://localhost:5000/api/tools')
.then((res) => res.data)
.then((data) => setTools(data));
}, []);
return (
<div id="newProject">
<Formik
validate={validate}
validateOnChange={false}
validateOnBlur={false}
onSubmit={submitting}
initialValues={{
project_name: '',
start_date: undefined,
end_date: undefined,
teams_link: '',
number_sprints: undefined,
duration_sprints: undefined,
description: '',
time_budget_type: undefined,
project_type: undefined,
signed: undefined,
chance_winning: 0,
}}
>
{({ errors }) => (
<Form id="formCreateProject">
<h1 style={{ color: 'white' }}>Create a project</h1>
<label htmlFor="project_name">Project Name:</label>
<Field
type="text"
id="project_name"
name="project_name"
placeholder="Your project name"
/>
{errors.project_name && <p>{errors.project_name}</p>}
{projectNameExist ? <p style={{ color: 'white' }}>This project name already exist</p> : ''}
<Clients
clients={clients}
clientSelected={clientSelected}
newClient={newClient}
setNewClient={setNewClient}
setClientSelected={setClientSelected}
setClients={setClients}
/>
<Managers managers={managers} setManagers={setManagers} setManager={setManager} />
<label htmlFor="start_date">Start date:</label>
<Field
type="date"
id="start_date"
name="start_date"
min="1000-01-01"
max="3000-12-31"
/>
<label htmlFor="end_date">End date:</label>
<Field
type="date"
id="end_date"
name="end_date"
min="1000-01-01"
max="3000-12-31"
/>
{errors.end_date && <p>{errors.end_date}</p>}
<label htmlFor="teams_link">Teams link:</label>
<Field
type="text"
id="teams_link"
name="teams_link"
placeholder="Your teams link"
/>
<label htmlFor="number_sprints">Number of sprints:</label>
<Field type="number" id="number_sprints" name="number_sprints" />
<label htmlFor="duration_sprints">
Duration of sprints (in weeks):
</label>
<Field
type="number"
id="duration_sprints"
name="duration_sprints"
/>
<label htmlFor="description">Description:</label>
<Field
type="text"
id="description"
name="description"
placeholder="Short description of the project, what was sold, what are the expectations of the client?"
rows="4"
cols="50"
/>
<label htmlFor="time_budget_type">Budget type:</label>
<Field name="time_budget_type" id="time_budget_type" as="select">
<option value="">--Please choose an option--</option>
<option value="Time and material">Time and material</option>
<option value="Time Package">Time Package</option>
</Field>
<label htmlFor="project_type">Project type:</label>
<Field name="project_type" id="project_type" as="select">
<option value="">--Please choose an option--</option>
<option value="Development">Development</option>
<option value="Design">Design</option>
<option value="Cybersecurity">Cybersecurity</option>
<option value="Cloud">Cloud</option>
</Field>
<label htmlFor="signed">Is the contract signed?</label>
<Field name="signed" id="signed" as="select">
<option value="">--Please choose an option--</option>
<option value="0">False</option>
<option value="1">True</option>
</Field>
<label htmlFor="chance_winning">
Chance to win the contract (max 100%):
</label>
<Field
type="number"
id="chance_winning"
name="chance_winning"
min="0"
max="100"
/>
<Tools
tools={tools}
toolsSelected={toolsSelected}
newTool={newTool}
setNewTool={setNewTool}
setToolsSelected={setToolsSelected}
setTools={setTools}
/>
<Technos
technos={technos}
technosSelected={technosSelected}
newTechno={newTechno}
setNewTechno={setNewTechno}
setTechnosSelected={setTechnosSelected}
setTechnos={setTechnos}
/>
<Collaborators
collaborators={collaborators}
setCollaborators={setCollaborators}
collaboratorsSelected={collaboratorsSelected}
setCollaboratorsSelected={setCollaboratorsSelected}
/>
<button type="submit">
Create
</button>
</Form>
)}
</Formik>
</div>
);
};
export default NewProject;```