The image is successfully displaying in the Profile.js screen and other areas. However, when attempting to pass the image via useContext() to display in Navigation.js, it shows as src(unknown). What could be causing this issue?
https://i.stack.imgur.com/wxb7X.png
Profile.js
const {picture, setPicture} = useContext(UserProfileContext);
const [updateProfile, setUpdateProfile] = useState({ _id: '', photo: '', name: '', email:'', phonenumber:'', position:'', privilege:'', password:''});
const onChangePicture = e => {
if (e.target.files.length) {
setPreview(URL.createObjectURL(e.target.files[0]));
setPicture(e.target.files[0]);
} else {
return false;
}
};
const handleChange = (e, id) => {
e.persist();
let itemIndex;
const targetPlayer = playerProfile.find((player, index) => {
console.log({ player, id, index });
itemIndex = index;
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;
setPlayerProfile(tempPlayers);
setUpdateProfile({ ...updateProfile, [e.target.name]: e.target.value }); // this is added just to see if its working
setProfile({ ...profile, [e.target.name]: e.target.value });
setPicture(e.target.files[0]);
};
<div className="formInstructionsDiv formElement">
<div className="register_profile_image">
<input id="profilePic" name="photo" type="file" onChange={onChangePicture} />
</div>
<div className="previewProfilePic" >
<img alt="" onError={addDefaultSrc} name="previewImage" className="playerProfilePic_home_tile" src={photo} onChange={e => handleChange(e, id)}></img>
</div>
</div>
UserProfileProvider.js
import UserProfileContext from '../context';
const UserProfileProvider = ({children}) => {
const [picture, setPicture] = useState({ photo: ''});
const value = useMemo(() => ({
picture, setPicture
}), [picture]);
return (
<UserProfileContext.Provider value={value}>
{children}
</UserProfileContext.Provider>
)
}
export default UserProfileProvider;
Navigation.js
const Navigation = () => {
const {picture} = useContext(UserProfileContext);
return localStorage.getItem('loginEmail') &&
<div className="App">
<div className="wrapper">
<div id="wrap">
<nav className="siteNavigation_nav_links">
<div className="clubLogo landing"style={divStyle}><b>Southside Soccer</b></div>
<NavLink className="mobile_register_link" to="/">Home</NavLink>
<NavLink className="mobile_register_link" to="/profile">Profile</NavLink>
<NavLink className="mobile_login_link" to="/login" onClick={logout}>Logout</NavLink>
<NavLink className="mobile_login_link" to='/aboutus'>About us</NavLink>
<span className="mobile_login_link"><img className="nav_profile"src={picture.photo}></img></span>
</nav>
</div>
</div>
</div>
}
export default Navigation;