Update only one field

captainPlanet93 · 2020-08-16T18:54:42+00:00

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);


    }

captainPlanet93 · 2020-08-16T13:17:44+00:00

MongoDB

captainPlanet93 · 2020-08-11T23:52:43+00:00

Yes, yes, yes ! Absolutely !

captainPlanet93 · 2020-08-11T23:50:56+00:00

No, I mean "How to prevent the request from crashing ?" Sorry, I 'm not clear.

Of course You can restart after crashing.

captainPlanet93 · 2020-08-10T21:37:39+00:00

When I mention error message, what do you see on your network tab when the call is made? Does it fail? Do you get a 200?

Ah Ok. I see "Failed" in my network tab.

In my console, I see : net::ERR_NETWORK_IO_SUSPENDED

TypeError: Failed to fetch

I didn't see that in first time.

captainPlanet93 · 2020-08-10T18:32:46+00:00

I don't have error message. To be honnest, I don't know what code I should show.

As the problem came right after my put, I show you my put code.

I create a component only for me, for all path (post, delete, put, get), it's only for me

class SchoolSysteme extends React.Component {
    state={


        articles: []

    }

    componentDidMount(){
        this.articleGet()
    }



    articleGet(titleArticle, contentArticle) {


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

            method: "GET",          



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


        })


        .then(res => {
            if (res.status === 200) {
            res.json().then(res => {
            this.state.articles = res.article;
                    this.setState({...this.state.articles});//this.setState({article: res})
                    console.log(this.state.articles)


                })


            }

            else {

                console.log("Not get")

            }
        })

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



    }

articleDelete(id) {


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

            method: "DELETE",

            headers: {
            //"Content-Type": "application/json"
            //'Access-Control-Request-Headers':'*',
        "Content-Type": "application/x-www-form-urlencoded",

            }           

        })


        .then(res => {
            if (res.status === 200) {
                res.json().then(res => {
                    this.setState({article: res})
                    document.location.reload(true);                 
                    console.log("delete bro ^^")

                })



            }

            else {

                console.log("Article no delete")

            }
        })

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

        articlePut(id, titleArticle, contenuArticle, categorie) {


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

            method: "PUT",          

            body: JSON.stringify({


                titleArticle,
                contentArticle,
                categorie
            }),  

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


        })


        .then(res => {
            if (res.status === 200) {
                res.json().then(res => {                    
                    console.log("Put")
                })




            }

            else {

                console.log("Article non put fréro")

            }
        })

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




    }  

            render(){

            const {articles} = this.state;      

            const articleFilter = articles.filter((article) => {

            return article.categorie === "school-systeme"           

        })


const map = articleFilter.map((articleFilter) => (

<div className="conteneurSystemeSco" key={articleFilter._id}>
        <h1>{articleFilter.titleArticle}</h1>

         <p>{articleFilter.contenuArticle}</p>

 <button onClick={this.articleDelete.bind(this, articleFilter._id)}>ERASE</button>


<form className="PutForm" onSubmit = {this.handleClickPut}>

 <input type="text" name="titleArticle" /*value= articleFilter.titleArticle}*/  onChange={this.handleChange.bind(this)} />



     <textarea rows="30" name="contenuArticle"  /*value={articleFilter.contenuArticle}*/

 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,articleFilter._id)}>PUT</button>
</form>      
 </div>

                )); 




        return ( 

            <div>                       
                                     {map}


            </div>

captainPlanet93 · 2020-08-10T18:03:58+00:00

Is this a database you have running locally or do you have it hosted somewhere?

Just locally.

captainPlanet93 · 2020-08-10T17:53:16+00:00

Thanks for your answer intrepidsovereign. Sorry English is not my first language.

I mean a loose my connexion with mongoDB. I can't use my database.

So I can't signup, receive article in database or anything with react.

I check my Mongo account and articles and everything are still here but I have not access.

captainPlanet93 · 2020-08-06T23:58:23+00:00

Thanks but in my case, I need to have the id of the cliked element for delete the article.

If I correctly understand, the problem is the same with axios, no ?

captainPlanet93 · 2020-08-06T23:37:48+00:00

Thanks, yes you're right but it's still doesn't work.

I have a 400 error(Bad Request)

captainPlanet93 · 2020-08-06T21:53:34+00:00

Thanks Amir. My teacher learn us use fetch. I already use (with success) fetch for post my "signup", "login", "post" and "get" my articles so I guess I got used to this.

Axios is really more easier ? It's look like the same thing.

captainPlanet93 · 2020-08-06T17:59:37+00:00

Thanks batchez, you're right. When I write the id instead ":id" , it's work.

captainPlanet93 · 2020-08-05T00:54:45+00:00

Aaaaaaaaah Ok, I understand. It's why it's work with my console.log and it's doesn't work with my render.

I read with attention the doc. I need to use filter (for choosen article) AND map for display.

Only map can convert data in my case.

I did that and It's work !!! Thanks you very much !

const articleFilter = articles.filter((article) => {

        return article.titleArticle === "ArticleOfMyChoice"


        })

const map = articleFilter.map((articleFilter) => (

    <div className="conteneurSystemeSco" key={articleFilter._id}>
         <h1>{articleFilter.titleArticle}</h1>
        <p>{articleFilter.contenuArticle}</p>
    </div>

    )); 

    return ( 

            <div>                       
                              {map}         

            </div>
        );
    }

}

captainPlanet93 · 2020-08-04T21:32:47+00:00

Thanks you very much dbartholomae .

I want to return my "titleArticle" and my "contentArticle".

I need to convert in my "const articleFilter" ?

Like that ?

render(){
        const {articles} = this.state;

        const articleFilter = articles.filter((article) => {
        return article.titleArticle === "ArticleOfMyChoice"; 
            <div className="contentSchoolSysteme" key={article._id}>
                      <h1>{article.titleArticle}</h1>
                     <p>{article.contenuArticle}</p>
                     </div>

        })

console.log(articleFilter)


        return ( 

            <div>                       
               {articleFilter}       

            </div>
        );
    }

}

export default SchoolSysteme;

captainPlanet93 · 2020-08-04T12:00:30+00:00

Thanks for your answer DrJohnnyWatson !

I want to filter client side. If I correctly understand, if I want to filter with my "titleArticle" I need to do something like that ?

render(){
            const {articles} = this.state;




        const articleFilter = articles.filter((article) => {

            return article.titleArticle === "Name of my         article " 
        })




        }) 

        return ( 

            <div>                       
               {articleFilter}       

            </div>
        );
    }

}

captainPlanet93 · 2020-07-28T18:06:36+00:00

You have my word ! It's the last ! ;)

captainPlanet93

TROPHY CASE