title: TypeError: _data__WEBPACK_IMPORTED_MODULE_3___default.a.map is not a function
body: <p>I am new in react and trying to learn how array works with component using map function but I got this error recently and I don't have any idea what it is and how to solve it </p>
  
  <p>I have tried reading many blog related to this but none of them are helping me here.</p>
  
  <p>My react code is as follow: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import './App.css';
  import Text from './Text.js';
  import questions from './data';
  
  class App extends React.Component {
    render() {
      let questionsAnswer = questions.map(item =&gt; &lt;Text question={item.question} answer ={item.answer}/&gt;);
  
  return &lt;div&gt;
    hi
      &lt;/div&gt;;
        }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>my array file is as follow:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const questions = [
      {
          id:"1",
          question:"How are you ?",
          answer:"I am fine"
      },
      {
          id:"2",
          question:"Where do you live?",
          answer:"Kathmandu"
      },
      {
          id:"3",
          question:"How old are you ?",
          answer:"I am 20yrs"
      },
      {
          id:"4",
          question:"Are you a male?",
          answer:"yes I am"
      }
  ]</code></pre>
  </div>
  </div>
  </p>