mardi 26 novembre 2019

this.state.annonces.map is not a function

I want to update State variable on react, when i set it by default my map function work well. But now when i update my state variable with setState i have the response map is not a function here is my code.

import React from 'react';

class Corps extends React.Component{

    state = {
      annonces : [
        {
          nom : " Karim Ngami",
          annonces: " selon le CEO de google Mr Karim Ngami google lens prends une nouvelle tournure"
        },
        {
          nom : " Brigitte Bami",
          annonces: "Je n'ai jamais douté de mon fils, je savais qu'il sera un grand home"
        },
        {
          nom : "Gladice Ngami",
          annonces: "Le monde est étonné par ces proesses, mais nous non (rire) il savait clairement ou il allait"
        },

      ]
    }

    addAnonces = () =>{

      this.setState({
        annonces : this.state.annonces.push({
          nom : "Nkodi Ngami",
          annonces: "Le monde est étonné par ces proesses, mais nous non (rire) il savait clairement ou il allait"
        })
      })

      console.log(this.state.annonces.length);
    }

    render(){



      return(<div>
                <h5>Mes annonces</h5>
                <div className ="row">

                   <div className="col-sm-10 col-sm-push-1">
                        listes

                      {this.state.annonces.map((item) =>(
            <div className ="row"> 
              <div className="col-sm-4">
                <span>{item.nom} :</span>

              </div>
              <div className="col-sm-7 col-sm-push-1">
                <span>{item.annonces}</span>
              </div>
            </div>) 
            )}
                  <button className="btn-success" onClick={this.addAnonces}> Envoyé </button>
                   </div>
                   <div className="col-sm-10 col-sm-push-1">
                        <form>
                            <label for="nom">Votre nom:</label> <input type="text" id="nom" /><br/>
                            <label for="texte">votre annonce:</label><textarea placeholder="Ecrivez votre annonce" name="texte" id="texte">
                            </textarea><br/>

                        </form>
                   </div>
                </div> 
             </div>
            );  
    }
}

export default Corps; 



Aucun commentaire:

Enregistrer un commentaire