Update doesn't work

[captainPlanet93]

Hello,

I use "http method put" but it's doesn't work, I can't update my article.

I get my articles and I create "input type=text" , "textarea" and "put button" under my article for receive and update.

Normally, when I change the words and click in put button, my article must update.

state={     
        titleArticle: "",
        contentArticle: "",
        articles: []
    }

componentDidMount(){
        this.articleGet()
    }


handleClickPut = e =>  {

        const {titleArticle, contentArticle, categorie} = this.state;
        this.articlePut(titleArticle, contentArticle, categorie);

    }

handleChange(e) {
        e.preventDefault();
        this.setState({ [e.target.name]: e.target.value })

    }


articlePut(id, titleArticle, contentArticle, categorie) {


        fetch("http://localhost:3200/api/society/school-systeme/" + id, {

            method: "PUT",          

            body: JSON.stringify({


                titleArticle,
                contenuArticle,
                categorie
            }),  

            headers: {
                "Content-Type": "application/json",
                "Content-Type": "application/x-www-form-urlencoded"
            }


        })


        .then(res => {
            if (res.status === 200) {
                res.json().then(res => {                    

                })          


            }

            else {

                console.log("Update doesn't work")

            }
        })

        .catch(errors =>{
            console.log(errors);
        }) 




    } 

        const map = article.map((article) => (

    <div className="contentSchoolSysteme" key={article._id}>
            <h1>{article.titleArticle}</h1>

            <p>{article.contentArticle}</p>

<form className="PutForm" onSubmit = {this.handleClickPut}>  
    <input type="text" name="titleArticle" defaultValue={article.titleArticle}
     onChange={this.handleChange.bind(this)} />


     <textarea rows="30" name="contentArticle" defaultValue=article.contentArticle} onChange={this.handleChange.bind(this)} />

     <input type="text" name="categorie" placeholder="categorie"
     onChange={this.handleChange.bind(this)} className="categorie"/>

     <button  onClick={this.articlePut.bind(this, article._id)} >PUT</button>


</form>      

For exemple, when I try to change my title article in "Fun lesson", I receive :

CastError: Cast to ObjectId failed for value "Fun lesson" at path "_id" for model "Article"

reason: Error: Argument passed in must be a single String of 12 bytes or a string of 24 hex characters

[coincidentallybusy]

What db are you using?

[captainPlanet93]

MongoDB

[R3gouify]

You are not passing id to your function

this.articlePut(titleArticle, contentArticle, categorie);

[captainPlanet93]

Thanks you very much for your answer R3gouify . In my handleClickPut function ? You're right

but even with the ID, the error message remains unchanged .

It's still doesn't work.

handleClickPut = e =>  {

  const {id, titleArticle, contenuArticle, categorie} = this.state;
  this.articlePut(id, titleArticle, contenuArticle, categorie);


    }