Unable to display image/picture in navigation passed by useContext()

Question

Image is displaying in Profile.js screen and other areas. But when I passed the image via useContext() to display in Navigation.js, it is displaying src(unknown), may I know what is the key issue here ?

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;

Answer 1

picture is supposed to be an object according to your state declaration:

const [picture, setPicture] = useState({ photo: ''});

however when you update it you set the file object in it like setPicture(e.target.files[0]); and hence picture.photo is undefined

Another thing to note is that you cannot directly render the image from File object, you need to use FileReader and convert it into a data blob

const onChangePicture = e => {
    if (e.target.files.length) {
      setPreview(URL.createObjectURL(e.target.files[0]));
      setPicture({photo:e.target.files[0]});
    } else {
      return false;
    }
  };

then in Navigation you will use it like

const Navigation = () => {
    const [imageSrc, setImgSrc] = useState(null);
    const {picture} = useContext(UserProfileContext); 

    useEffect(() => {
       const reader = new FileReader();
       reader.addEventListener('load', () => {
           setImgSrc(reader.result);
       });
       reader.readAsDataURL(picture.photo);
    }, [picture.photo])
    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={imageSrc}></img></span>
                    </nav>
                </div>
            </div>
        </div>
}

export default Navigation;