title: React component not recognizing .filter as a function
body: <p>So I am making a react app for food recipes and am pulling data from a JSON file. For some reason the .filter and .map of the recipes is not showing as a function. Any help greatly appreciated.</p>
  
  <p>It most examples it looks like you can add this info under render. I am a noob with both coding and react so I am sure it is user error.</p>
  
  <pre><code>import React from 'react';
  import ReadInput from'./readInput';
  import '../Styles/Home.css';
  
   class Input extends React.Component{
       constructor(props) {
           super(props);
       this.state = {
           value:''
       }
       this.handleName = this.handleName.bind(this);
   };
  handleName(e){
      console.log('handleName')
      if(e === 'chicken'){
              this.setState({value: 1})
          } else if (e === 'beef') {
              this.setState({value: 2})
          } else if (e === 'rice'){
              this.setState({value: 3})
          }
  
  }
  
  
  render(){
      const menu = this.props.data.filter((recipe) =&gt; {
              if(recipe.id === this.state.value){
              return recipe.dish;
          }
      })
      .map(recipe =&gt; {
          return(
              &lt;div&gt;
              &lt;li key={recipe.id}&gt;{recipe.dish}&lt;/li&gt;
              &lt;li &gt;{recipe.ingredients}&lt;/li&gt;
              &lt;/div&gt;
          )
      })
  
      return(
          &lt;div&gt;
              &lt;ReadInput
                  onChange={this.handleName} /&gt;
              &lt;button className="homeButton" onClick={this.menu}&gt;Click&lt;/button&gt;
              &lt;ul className='listStyle'&gt;
                  {menu}
              &lt;/ul&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>export default Input;
  </code></pre>
  
  <p>app file</p>
  
  <pre><code>import React from 'react';
  import Input from'./Input';
  import recipes from'../data.json';
  
  class App extends React.Component{
      constructor(props) {
          super();
  
  }
  render(){
      return(
          &lt;div&gt;
              &lt;Input data={recipes} /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>export default App;</p>