title: TypeError: Cannot read property 'map' of null, REACTJS and Axios
body: <p>I am creating a search bar. The user write his request, and when he press the search button, 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, because when I add these lines in the return </p>
  
  <pre><code>                    &lt;ul&gt;
                        { this.state.filter.map(book =&gt; (
                          &lt;li key={book.id}&gt;{book.title},{book.author}&lt;/li&gt;
                        ))}
                      &lt;/ul&gt;
  </code></pre>
  
  <p>, I have this error: TypeError: Cannot read property 'map' of null. What can I change/add in my code in order to display correctly the result of my request please? (I post the picture of the network without the map)</p>
  
  <p><a href="https://i.stack.imgur.com/1BzYPl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1BzYPl.png" alt="network"></a></p>
  
  <pre><code>import React, {Component} from 'react';
  import {
      MDBContainer,MDBCol, MDBBtn, 
    } from 'mdbreact';
  import "./acceuil.css";
  import axios from 'axios';
  
  class Acceuil extends Component{
    constructor(props){
      super(props);
      this.state = {
        search:'',
        filter: null,
        error:'',
      }
      this.searchTitle = this.searchTitle.bind(this);
    }
  
    change = e =&gt; {
      this.setState({
        [e.target.id]: e.target.value,
        });
    }  
  
    searchTitle = (search) =&gt; e =&gt; {
      console.log(search);
      let formData = new FormData();
      formData.append("search",search);
      const url = "http://localhost:8888/recherche/recherche_titre.php"
      axios.post(url, formData)
  
      .then(response =&gt; response.data)
  
      .then((data) =&gt; {
        this.setState({filter: data});
        console.log(this.state.filter)
      })
  
  
      setTimeout(() =&gt; {
        this.setState({
          error: '',
        });
      }, 2000);
  
      e.preventDefault();
    }
  
      render() {
          const container = {height:530};
  
          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" id="search" type="text" placeholder="Search" onChange={this.change} /&gt;
                      &lt;/div&gt;
                    &lt;/MDBCol&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                    &lt;MDBBtn  onClick={this.searchTitle(this.state.search)} color="dark" size="lg"&gt;Search&lt;/MDBBtn&gt;
  
                  &lt;ul&gt;
                    { this.state.filter.map(book =&gt; (
                    &lt;li key={book.id}&gt;{book.title},{book.author}&lt;/li&gt;
                    ))}
                  &lt;/ul&gt;
              &lt;/div&gt;
  
          );
      }
  }
  
  export default Acceuil;
  </code></pre>