title: Error: Unhandled Rejection (TypeError): Cannot read property 'livres' of undefined, ReactJS, Search
body: <p><a href="https://i.stack.imgur.com/pyFda.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pyFda.png" alt="console result"></a>I am creating a search bar. The user write his request, and when he press the filter button corresponding, it's stocked in <code>search</code>, sent via Axios, and return the result at the end.However, I have the good results in my console (the code in the back is ok) but I didn't manage to display the data in my page only when I try with the edition filter (with the title filter it's ok). I have this error : Unhandled Rejection (TypeError): Cannot read property 'livres' of undefined. What can I ad/change in my code please?</p>
  
  <pre><code>import React, {Component} from 'react';
  import {
      MDBContainer,MDBCol, MDBBtn, 
    } from 'mdbreact';
  import "./accueil.css";
  import axios from 'axios';
  import {  MDBDropdown,
    MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem,  } from "mdbreact";
  
  
  
  class HomePage extends Component{
      constructor(props){
          super(props);
          this.state = {
        search:'',//va contenir la valeur entrée dans la barre de recherche
        filter: [],//va contenir les resultats de la recherche
        error:'',//va contenir l'erreur en cas d'erreur
          }
          this.searchTitle = this.searchTitle.bind(this);
          this.searchEdition = this.searchEdition.bind(this);
      }
  
    change = e =&gt; {
      this.setState({
        [e.target.id]: e.target.value,
        });
    }  
  
    //search with the title filter
    searchTitle = (search) =&gt; e =&gt; {
      console.log(search);
      let formData = new FormData();
      formData.append("title",search);
      const url = "http://localhost:8888/API/Accueil/recherche_titre.php"
      axios.post(url, formData)
  
      .then(response =&gt; response.data)
  
      .then((data) =&gt; {
        this.setState({filter: data.results.livres});
        console.log(this.state.filter)
      })
  
  
      setTimeout(() =&gt; {
        this.setState({
          error: '',
        });
      }, 2000);
  
      e.preventDefault();
    }
  
    //search with the edition filter
    searchEdition = (search) =&gt; e =&gt; {
      console.log(search);
      let formData = new FormData();
      formData.append("edition",search);
      const url = "http://localhost:8888/API/Accueil/recherche_edition.php"
      axios.post(url, formData)
  
  
      .then((data) =&gt; {
        this.setState({filter: data.results.livres});
        console.log(this.state.filter)
      })
  
  
      setTimeout(() =&gt; {
        this.setState({
          error: '',
        });
      }, 2000);
  
      e.preventDefault();
    }
  
      render() {
          return(
              &lt;div&gt;
              &lt;div className="searchPosition"&gt;
                &lt;MDBCol&gt;
                  &lt;div className="active-pink-3 active-pink-4 mb-4"&gt;
                    &lt;input className="form-control" type="text" placeholder="Search..." aria-label="Search" /&gt;
                  &lt;/div&gt;
                &lt;/MDBCol&gt;
              &lt;/div&gt;
              &lt;br&gt;&lt;/br&gt;
              &lt;div &gt;
              &lt;ul className="ulFilter"&gt;
              &lt;li className="liFilter"&gt;Choose a filter  &lt;/li&gt;
              &lt;li className="liFilter"&gt;
                &lt;MDBBtn  onClick={this.searchTitle(this.state.search)} color="dark" size="lg"&gt;Titre&lt;/MDBBtn&gt;
              &lt;/li&gt;
              &lt;li className="liFilter"&gt;
                &lt;MDBBtn  onClick={this.searchEdition(this.state.search)} color="dark" size="lg"&gt;Edition&lt;/MDBBtn&gt;
              &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul className="resultsSearch"&gt; 
                    { this.state.filter ? this.state.filter.map(book =&gt; (
                        &lt;li className=".liResults" key={book.id}&gt;{book.title},{book.edition}&lt;/li&gt;
                    )) : &lt;em&gt;Loading&lt;/em&gt;}
                  &lt;/ul&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
          );
      }
  }
  
  export default HomePage;
  </code></pre>