System throws exception and display playerProfile.map is not a function - reactjs

Question

I would like to display data received in the Player Profile fields. Started with name field, it displays name data, but while trying to edit the name text field, system throws following exception, TypeError: playerProfile.map is not a function. I have wrapped the fetch call inside the arrow function. Can someone please advise on what is the root cause of this error.
Note: At the moment I have received the value for name field only, need to display for other fields and still need to work on handleSubmit()
Detailed error message from console:
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)
My Sample Code
const [playerProfile, setPlayerProfile] = useState([]);
const handleSubmit = (e) => {
e.preventDefault()
}
const onChange = (e) => {
e.persist();
setPlayerProfile({ ...playerProfile, [e.target.name]: e.target.value });
}
useEffect(() => {
const fetchData = async () => {
try {
const res = await Axios.get('http://localhost:8000/service/profile')
setPlayerProfile(res.data.playerProfile);
} catch (e) {
console.log(e);
}
}
fetchData();
}, []);
return (
<div className="register_player_Twocolumn_layout_two">
<form onSubmit={handleSubmit} className="myForm">
{
playerProfile.map(({ id, image, name, email, position, privilege, password }) =>(
<div>
<div key={id} className="formInstructionsDiv formElement">
<h2 className="formTitle">Player Profile</h2>
<div className="register_profile_image">
<input id="profilePic" name="photo" type="file"/>
</div>
<div className="previewProfilePic" >
<img alt="" error="" name="previewImage" className="playerProfilePic_home_tile" src=""></img>
</div>
</div>
<div className="fillContentDiv formElement">
<label>
<input className="inputRequest formContentElement" name="name" type="text" key={name} value={name} onChange={onChange}/>
</label>
<label>
<input className="inputRequest formContentElement" name="email" type="text"/>
</label>
<label>
<div className="select" >
<select name="privilege" id="select">
<option value="player">PLAYER</option>
<option value="admin">ADMIN</option>
</select>
</div>
</label>
<label>
<input className="inputRequest formContentElement" name="password" type="password"/>
</label>
</div>
<div className="submitButtonDiv formElement">
<button type="submit" className="submitButton">Save</button>
</div>
</div>
))
}
</form>
</div>
);

Answer 1

TLDR: Check the Sandbox
#soccerway, based on our comments pointed out as per typos in you approach, here is some code that attempts to fix them. The link to the Live Codesandbox
SOME Context
When you define you playerProfile component state, you initialize it as an array, successfully update it from the server as an array but mess it up in the input onChange handler. Let's say you type s in the name input. With this...
setPlayerProfile({ ...playerProfile, [e.target.name]: e.target.value });
...you are transforming the playerProfile form this array.
// Fetched playerProfile from the api.
playerProfile = [
{
name: "David",
email: "david#testmail.com",
phonenumber: null,
id: 5,
privilege: "PLAYER",
photo: "C:\\fakepath\\city.JPG",
position: "FORWARD",
updatedAt: "2020-05-25T11:02:16.000Z"
},
// Extra profile put to have a solid example
{
name: "Goriath",
email: "goriath#testmail.com",
phonenumber: null,
id: 5,
privilege: "PLAYER",
photo: "C:\\fakepath\\goriath.JPG",
position: "MIDI",
updatedAt: "2020-05-26T11:02:16.000Z"
},
]
// To This Object
playerProfile = {
0: {
name: "David",
email: "david#testmail.com",
phonenumber: null,
id: 5,
privilege: "PLAYER",
photo: "C:\\fakepath\\city.JPG",
position: "FORWARD",
updatedAt: "2020-05-25T11:02:16.000Z"
},
1: {
name: "Goriath",
email: "goriath#testmail.com",
phonenumber: null,
id: 6,
privilege: "PLAYER",
photo: "C:\\fakepath\\goriath.JPG",
position: "MIDI",
updatedAt: "2020-05-26T11:02:16.000Z"
},
name: Davids"
}
Like you see, you cannot map over an object unless if you get its keys or entries, in which case the approach would still be invalid by the second element in the object.
The other issue is that you are trying to update an object, and directly appending it to the array/object. If the update is successful, this will result into duplicate data save for the name. You need to find the old object in state and update it, then totally replace it. That would be fine if your data was normalized, like saved by keys initially. Something like this...
data= {
playerProfilesById = {
5: { // Player ID is the key
name: "David",
email: "david#testmail.com",
phonenumber: null,
id: 5,
privilege: "PLAYER",
photo: "C:\\fakepath\\city.JPG",
position: "FORWARD",
updatedAt: "2020-05-25T11:02:16.000Z"
},
6: {
name: "Goriath",
email: "goriath#testmail.com",
phonenumber: null,
id: 6,
privilege: "PLAYER",
photo: "C:\\fakepath\\goriath.JPG",
position: "MIDI",
updatedAt: "2020-05-26T11:02:16.000Z"
},
},
playerProfileIds=[5,6]
}
That way its easy to update playerProfilesById with your approach, with the [e.target.id](assuming you're passing the input tag it's id) not [e.target.name], while using the playerProfileIds to map over the items in the jsx.
However if you don't have control over the api data format, you could instead make sure you update your handler to receive an id(assuming the id is unique) from the onChange, use that id to find the profile in the array.
While finding, you could keep the element array Index, and use it to directly target and update the array. (Commented out approach in handler)
Or you could just map over the entire array and update the profile that changed, then use that data to eventually update state.
Below is the full approach.
import React, { useState, useEffect } from "react";
// import axios from "axios";
/* Assuming your api returns data in the follwoing format... */
const fakeAPICall = () => {
// CALL TO AXIO MUTED
// const res = await axios.get("http://localhost:8000/service/profile");
// NOTE: Please normalize this data so it's easy to update
// READ ABOUT: https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape
const data = {
playerProfile: [
{
name: "David",
email: "david#testmail.com",
phonenumber: null,
id: 5,
privilege: "PLAYER",
photo: "C:\\fakepath\\city.JPG",
position: "FORWARD",
updatedAt: "2020-05-25T11:02:16.000Z"
},
{
name: "Goriath",
email: "goriath#testmail.com",
phonenumber: "1234345234",
id: 6,
privilege: "PLAYER",
photo: "C:\\fakepath\\goriath.JPG",
position: "MIDFIELDER",
updatedAt: "2020-05-26T11:02:16.000Z"
}
]
};
return { data };
};
const PlayerProfile = () => {
// Note that your player profile is defined as an array in state.
// Remember to always keep it that way when updating it.
const [playerProfile, setPlayerProfile] = useState([]);
const handleSubmit = e => {
e.preventDefault();
};
// Pass the id to the handler so you will know which item id changing.
const handleChange = (e, id) => {
e.persist();
let itemIndex;
const targetPlayer = playerProfile.find((player, index) => {
console.log({ player, id, index });
itemIndex = index; // Track the index so you can use it to update later.
return player.id === id;
});
console.log({ targetPlayer, id, e });
const editedTarget = {
...targetPlayer,
[e.target.name]: e.target.value
};
const tempPlayers = Array.from(playerProfile);
tempPlayers[itemIndex] = editedTarget;
/*
// Alternatively:: you can just map over the array if you dont want to track the index
const tempPlayers = playerProfile.map((profile, index) => {
return profile.id === id ? editedTarget : profile;
});
*/
setPlayerProfile(tempPlayers);
};
useEffect(() => {
const fetchData = async () => {
try {
// const res = await axios.get("http://localhost:3000/api/products");
const res = await fakeAPICall();
console.log({ response: res });
setPlayerProfile(res.data.playerProfile);
} catch (e) {
console.log(e);
}
};
fetchData();
}, []);
console.log({ "⚽: playerProfile": playerProfile });
return (
<div className="register_player_Twocolumn_layout_two">
<h1>CAPTURE PLAYER PROFILE</h1>
<p>Form to capture player Profile</p>
<hr />
<form onSubmit={handleSubmit} className="myForm">
{playerProfile.map(
({ id, image, name, email, position, privilege, password }) => (
<div key={id}>
{/*2. Also put the key on the outer div in the map above */}
<div className="formInstructionsDiv formElement">
<h2 className="formTitle">Player Profile</h2>
<div className="register_profile_image">
<input id="profilePic" name="photo" type="file" />
</div>
<div className="previewProfilePic">
<img
alt=""
error=""
name="previewImage"
className="playerProfilePic_home_tile"
src=""
/>
</div>
</div>
<div className="fillContentDiv formElement">
<label>
NAME
<input
className="inputRequest formContentElement"
name="name"
type="text"
// key={name} // Remove this key or renmae it to id. Since name changes on rerender, it confuses react that the key is different and forces the element to toose focus
value={name}
onChange={e => handleChange(e, id)} // Pass the ID form here.
/>
</label>
<label>
<input
className="inputRequest formContentElement"
name="email"
type="text"
/>
</label>
<label>
<div className="select">
<select name="privilege" id="select">
<option value="player">PLAYER</option>
<option value="admin">ADMIN</option>
</select>
</div>
</label>
<label>
<input
className="inputRequest formContentElement"
name="password"
type="password"
/>
</label>
</div>
<div className="submitButtonDiv formElement">
<button type="submit" className="submitButton">
Save
</button>
</div>
</div>
)
)}
</form>
</div>
);
};
export default function App() {
return (
<div className="App">
<PlayerProfile />
</div>
);
}
PS: When you are mapping over items, each direct wrapper expects a unique key prop, that way react can know which component exactly changed to a avoid re-renders. In your approach, you're assigning the key to the input deep in the tree. Move it up to the outer most div wrapper.
Also make sure that whatever item you use as the key is unique, otherwise the items will keep loosing focus on updates if the key changes. For example in your code, the name is being changed but you are using it as the input. This results into a new key meaning you are working on a new element, eventually loosing focus on that input.

Answer 2

This might be one of your problem
<label>
<input className="inputRequest formContentElement"
name="name" type="text" key={name} value={name}
onChange ={onChange}/>
</label>
The value "name" of the name property of the input tag is not in the array of playerProfile.
I think it should be:
<label>
<input className="inputRequest formContentElement"
name={name} type="text" key={name} value={name}
onChange ={onChange}/>
</label>
that means your problem should be here
setPlayerProfile({ ...playerProfile, [e.target.name]: e.target.value });
playerProfile was an array, but the above line set's it to an object that's y it's throwing the error
This might work:
setPlayerProfile([ ...playerProfile, [e.target.name]: e.target.value ]);