I'm having a problem validating my form :
TypeError: Converting circular structure to JSON --> starting at object with constructor 'HTMLInputElement' | property '__reactFiber$17sge3uxmts' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle at stringify ()
And here is my fonction :
handleSubmitPost = event => {
event.preventDefault();
const composant = {
indiceReferencement: event.target.indiceReferencement.value,
nameComposant: event.target.nameComposant.value,
photo: event.target.photo.value,
referenceComposant: event.target.referenceComposant,
variante: event.target.variante.value,
quantite: event.target.quantite.value,
fk_Nomenclature: this.props.idNom
}
axios
.post('http://localhost:2022/api/composants/', composant, {
headers: {
'Content-Type': 'application/json'
}
})
.then(res=>{
console.log(res);
console.log(res.data);
})
.catch((error) => {
if (error.response) {
console.log(error.response);
console.log("server responded");
} else if (error.request) {
console.log("network error");
} else {
console.log(error);
}
})
}
And my component :
<Form className='form' onSubmit={this.handleSubmitPost}>
<Form.Group >
<Form.Label>Indice de referencement</Form.Label>
<Form.Control type="text"
name="indiceReferencement"
id="indiceReferencement"
/>
</Form.Group>
<Form.Group >
<Form.Label>Nom Composant</Form.Label>
<Form.Control name="nameComposant"
id="nameComposant"
/>
</Form.Group>
<Form.Group >
<Form.Label>Photo du composant</Form.Label>
<Form.Control name="photo"
id="photo"
/>
</Form.Group>
<Form.Group >
<Form.Label>Reference</Form.Label>
<Form.Control name="referenceComposant"
id="referenceComposant"
/>
</Form.Group>
<Form.Group >
<Form.Label>Variante</Form.Label>
<Form.Control name="variante"
id="variante"
/>
</Form.Group>
<Form.Group >
<Form.Label>Quantité</Form.Label>
<Form.Control name="quantite"
id="quantite"
/>
</Form.Group>
<Button type='submit' appearance="primary"> Ok </Button>
</Form>
Thank you !