0

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 !

Marboty
  • 1
  • 1
  • first of all won't `this.props.idNom` be undefined there is no such property on your component? – miyav miyav Apr 12 '22 at 08:05
  • but it seems like you are passing the html element to the request and it has circular reference, look at this post : https://stackoverflow.com/questions/4816099/chrome-sendrequest-error-typeerror-converting-circular-structure-to-json – miyav miyav Apr 12 '22 at 08:08
  • This.props.idNom is well defined, I get it back in my parent component. – Marboty Apr 12 '22 at 08:08
  • Should `event.target.referenceComposant` not be `event.target.referenceComposant.value`? – Phil Apr 12 '22 at 23:56
  • Yes I saw that while reading it, thanks! – Marboty Apr 13 '22 at 11:48

0 Answers0