title: System throws exception and display playerProfile.map is not a function
body: <p>I would like to display <code>data</code> received in the Player Profile fields. Started with <code>name</code> field, it displays name data, but while trying to edit the <code>name</code> text field, system throws following exception, <code>TypeError: playerProfile.map is not a function</code>. I have wrapped the <code>fetch</code> call inside the arrow function. Can someone please advise on what is the root cause of this error.</p>
  
  <p><em>Note: At the moment I have received the value for <code>name</code> field only, need to display for other fields and still need to work on <code>handleSubmit()</code></em></p>
  
  <p><code>Detailed error message from console:</code></p>
  
  <pre class="lang-sh prettyprint-override"><code>Uncaught TypeError: playerProfile.map is not a function
      at Profile (Profile.js:34)
      at renderWithHooks (react-dom.development.js:14803)
      at updateFunctionComponent (react-dom.development.js:17034)
      at beginWork (react-dom.development.js:18610)
      at HTMLUnknownElement.callCallback (react-dom.development.js:188)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
      at invokeGuardedCallback (react-dom.development.js:292)
      at beginWork$1 (react-dom.development.js:23203)
      at performUnitOfWork (react-dom.development.js:22157)
  </code></pre>
  
  <p>My Sample Code</p>
  
  <hr>
  
  <pre><code>const [playerProfile, setPlayerProfile] = useState([]);
  
      const handleSubmit = (e) =&gt; {
          e.preventDefault()
        }
  
        const onChange = (e) =&gt; {
          e.persist();
          setPlayerProfile({ ...playerProfile, [e.target.name]: e.target.value });
        }
  
  
        useEffect(() =&gt; {
          const fetchData = async () =&gt; {
            try {
              const res = await Axios.get('http://localhost:8000/service/profile')
              setPlayerProfile(res.data.playerProfile);
            } catch (e) {
              console.log(e);
            }
          }
          fetchData();
        }, []);
  
        return (
          &lt;div className="register_player_Twocolumn_layout_two"&gt; 
            &lt;form onSubmit={handleSubmit} className="myForm"&gt;
            {
              playerProfile.map(({ id, image, name, email, position, privilege, password }) =&gt;(
              &lt;div&gt;
              &lt;div key={id} className="formInstructionsDiv formElement"&gt;
                &lt;h2 className="formTitle"&gt;Player Profile&lt;/h2&gt;
                &lt;div className="register_profile_image"&gt;
                  &lt;input id="profilePic" name="photo" type="file"/&gt;
                &lt;/div&gt;
                &lt;div className="previewProfilePic" &gt;
                  &lt;img alt="" error="" name="previewImage" className="playerProfilePic_home_tile" src=""&gt;&lt;/img&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="fillContentDiv formElement"&gt;
                &lt;label&gt;
                  &lt;input className="inputRequest formContentElement" name="name" type="text" key={name} value={name} onChange={onChange}/&gt;
                &lt;/label&gt;
                &lt;label&gt;
                  &lt;input className="inputRequest formContentElement" name="email" type="text"/&gt;
                &lt;/label&gt;
                &lt;label&gt;
                  &lt;div className="select" &gt;
                    &lt;select name="privilege" id="select"&gt;
                      &lt;option value="player"&gt;PLAYER&lt;/option&gt;
                      &lt;option value="admin"&gt;ADMIN&lt;/option&gt;
                    &lt;/select&gt;
                  &lt;/div&gt;
                &lt;/label&gt;
                &lt;label&gt;
                  &lt;input className="inputRequest formContentElement" name="password" type="password"/&gt;
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;div className="submitButtonDiv formElement"&gt;
                  &lt;button type="submit" className="submitButton"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
              &lt;/div&gt;
                ))
              }
            &lt;/form&gt;
          &lt;/div&gt;
      );
  </code></pre>