title: React cannot read property 'length' of undefined but array is defined
body: <p>I'm requesting data from an API within my react class component. Within my fetchData method, I setState to a key called data that initially is only an empty object. Withing the fetchData method, the object is filled with the data result from the API. I spread the result into the data object and within the object, I add a "directors" key that is an array that gets created because of the filter method. My issue is that I need the length of the directors array but this.state.data.directors.length caused an error saying that it's undefined. However, this.state.data.directors returns to me the array successfully and I can see within the console when I open the array up that the length property is the number that I actually need. Here is a version of my code.</p>
  
  <pre><code>constructor(){
          super();
          this.state={
              data: {},
          };
      }
  
      fetchData = async movieId =&gt; {
  
          try{
              const endpoint = `${API_URL}movie/${movieId}?api_key=${API_KEY}`;
              const result = await(await fetch(endpoint)).json();
              const creditsEndpoint = `${API_URL}movie/${movieId}/credits?api_key=${API_KEY}`;
              const creditsResult = await (await fetch(creditsEndpoint)).json();
              const directors = creditsResult.crew.filter(member =&gt; member.job === 'Director');
  
              this.setState({
                  data: {
                      ...result,
                      actors: creditsResult.cast,
                      directors
                  }
              }, () =&gt; {
                  localStorage.setItem(`${movieId}`, JSON.stringify(this.state.data));
              });
  
          }catch(error){
              this.setState({error: true});
              alert(error);
          }
          this.setState({loading: false});
      }
  
      componentDidMount(){
          const {movieId} = this.props.match.params;
  
          if(localStorage.getItem(`${movieId}`)){
              console.log("grabbing from localStorage" + " " + movieId);
              this.setState({
                  data: JSON.parse(localStorage.getItem(`${movieId}`))
              });
          } else {
              console.log("Grabbing from API");
              const {movieId} = this.props.match.params;
              this.setState({loading: true});
              this.fetchData(movieId);
          }
      }
  
      render(){
          const {data} = this.state;
          console.log(this.state.data.directors.length);
          return(
  </code></pre>
  
  <p>I expected to get the length property from the directors array since console.logging the directors array return an array with an object in it.</p>