title: While passing image via useContext from login and image is not displaying
body: <p>During onSubmit in the Login, I did <code>setLoginPhoto(res.data.photo)</code>and then using <code>useContext()</code> to pass the photo information to Navigation. But apparently the photo information is getting clearing off once login is successful and displays the Home screen. Also loginPhoto.photo, photo alone is <code>undefined</code>, but I can see image details in <code>loginPhoto</code> while hover on it.</p>
  <p>On click on Login, I have set various break points and saw the image information is actually passed to <code>UserLoginProvider</code> and then available in <code>Navigation</code>.  ( please refer see screenshots)</p>
  <p>note: Image file path saved to database using multer, ie, [ <code>var imagePath = req.file.path;</code>] and images are displaying in other screens, like Home, Profile screens.</p>
  <p><strong>Step by step:</strong>
  Press on Login, I could see the <code>loginPhoto</code> in <code>UserLoginProvider</code> has got image ( please refer screenshot )</p>
  <p><a href="https://i.stack.imgur.com/D1Fef.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D1Fef.png" alt="enter image description here" /></a></p>
  <p>Now I could see the <code>loginPhoto</code> available in Navigation:</p>
  <p><a href="https://i.stack.imgur.com/PnKJx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PnKJx.png" alt="enter image description here" /></a></p>
  <p>But once the login is successful and Home page displays, the <code>loginPhoto</code> become null and the image is not displaying in navigation. Any advise on how to fix this problem ?</p>
  <p><code>Login.js</code></p>
  <pre><code>import React, { useContext, useEffect, useState } from &quot;react&quot;;
  import { UserProfileContext, UserLoginContext } from '../context';
  
    const {loginPhoto, setLoginPhoto} = useContext(UserLoginContext);
    const [helperText, setHelperText] = useState('');
    const [value, setValue] = React.useState('');
  const onSubmit = () =&gt; {
      const fetchData = async () =&gt; {
        try {
          const res = await axios.post('http://localhost:8000/service/login', { email, password });
          //setLoginData(res.data.loginData);  
          console.log(&quot;Front End success message:&quot; + res.data.success);
          console.log(&quot;My Photo Data:&quot; + res.data.photo);
          setLoginPhoto(res.data.photo);
          if (res.data.success) {
            setHelperText(&quot;Login successfully&quot;);
            setValue(res.data.privilege);
            localStorage.setItem('Privilege', res.data.privilege);
            localStorage.setItem('loginEmail', email);
            history.push('/')
            window.location.reload(true)
          }
          else {
            const failMessage = res.data.fail;
            setHelperText(failMessage);
          }
        } catch (e) {
          console.log(e.response.data);
          setHelperText(e.response.data.fail);
        }
      }
      fetchData();
    };
  </code></pre>
  <p><code>UserLoginProvider.js</code></p>
  <pre><code>import { UserProfileContext, UserLoginContext } from '../context';
  
  const UserLoginProvider = ({children}) =&gt; {
  
      const [loginPhoto, setLoginPhoto] = useState({ photo: ''});
  
      console.log(&quot;Nav Image:&quot;+loginPhoto);
  
       const value = useMemo(() =&gt; ({
          loginPhoto, setLoginPhoto
      }), [loginPhoto]);
  
      return (
         &lt;UserLoginContext.Provider value={value}&gt;
             {children}
         &lt;/UserLoginContext.Provider&gt;
      )   
  }
  export default UserLoginProvider;
  </code></pre>
  <p><code>Navigation.js</code></p>
  <pre><code>import { UserProfileContext, UserLoginContext } from '../context';
      const { loginPhoto } = useContext(UserLoginContext);
      
          useEffect(() =&gt; {
              if (loginPhoto.photo) {
              
              const reader = new FileReader();
              reader.addEventListener('load', () =&gt; {
                  setImgSrc(reader.result);
                  localStorage.setItem(&quot;imgData&quot;, reader.result);
              });
              reader.readAsDataURL(loginPhoto.photo);
              }
          }, [loginPhoto.photo])
      
          var loginUserImg = localStorage.getItem('imgData');
      
          console.log(loginUserImg);
      
       &lt;img className=&quot;nav_profile&quot; src={loginUserImg}&gt;&lt;/img&gt;
  </code></pre>
  <p><code>App.js</code></p>
  <pre><code>var ReactDOM = require(&quot;react-dom&quot;);
  
  
  const App = () =&gt; {
  
    return (
    &lt;BrowserRouter&gt;
    &lt;UserLoginProvider&gt;
      &lt;UserProfileProvider&gt;
            &lt;&gt;
          &lt;Navigation /&gt;
            &lt;Switch&gt;
                &lt;ProtectedRoute exact path=&quot;/&quot; component={Home} /&gt;
                &lt;ProtectedRoute path=&quot;/profile&quot; component={Profile} /&gt;
                &lt;ProtectedRoute path=&quot;/aboutus&quot; component={Aboutus} /&gt;
                &lt;ProtectedRoute path=&quot;/availability&quot; component={Availability} /&gt;
                &lt;Route path=&quot;/register&quot; component={Register} /&gt;
                &lt;Route path=&quot;/login&quot; component={Login} /&gt;
                &lt;Route exact path=&quot;*&quot; component={ErrorPage} /&gt;
            &lt;/Switch&gt;
            &lt;/&gt;
        &lt;/UserProfileProvider&gt;
      &lt;/UserLoginProvider&gt;
     &lt;/BrowserRouter&gt;
    );
  };
  ReactDOM.render(
    React.createElement(App, null),
    document.getElementById(&quot;root&quot;)
  );
  
  export default App;
  </code></pre>
  <p><code>home.js</code></p>
  <pre><code>import React, { useRef, useEffect, useState } from &quot;react&quot;;
  import AlertDialog from &quot;../modal/Dialog&quot;;
  import Axios from &quot;axios&quot;;
  
  
  const Home = () =&gt; {
  
    const [phoneTooltip, setPhoneTooltip] = useState({ show: false, position: &quot;absolute&quot; });
    const [playerList, setPlayerList] = useState([]);
    const [searchTerm, setSearchTerm] = useState(&quot;&quot;);
    const [searchResults, setSearchResults] = useState([]);
    const [deleteIcon, setDeleteIcon] = useState({ show: false });
    const [deleteDialog, setDeleteDialog] = useState(false);
    const [playerId, setPlayerId] = useState(&quot;&quot;);
    const isMounted = useRef(false);
    const [isLoading, setIsLoading] = useState(true);
  
  
    const handleChange = event =&gt; {
      setSearchTerm(event.target.value);
    };
  
  
    useEffect(() =&gt; {
      isMounted.current = true;
      return () =&gt; isMounted.current = false;
    }, []);
  
  
    useEffect(() =&gt; {
      setTimeout ( () =&gt; {
      const fetchData = async () =&gt; {
        try {
          const res = await Axios.get('http://localhost:8000/service/players');
          if (isMounted.current) {
            setPlayerList(res.data.players);
            setSearchResults(res.data.players);
            const privilege = localStorage.getItem('Privilege');
            console.log(&quot;What is getting in Front End:&quot; + privilege);
            showDeleteIcon(privilege);
            setIsLoading(false);
          }
        } catch (e) {
          if (isMounted.current) {
            setIsLoading(false);
          }
          console.log(e);
        }
      }
      fetchData();
      }, 1500);
    }, []);
  
  
    useEffect(() =&gt; {
      const results = playerList.filter(player =&gt;
        player.name.toLowerCase().includes(searchTerm) || player.name.toUpperCase().includes(searchTerm) || player.position.toLowerCase().includes(searchTerm)
        || player.position.toUpperCase().includes(searchTerm)
      );
      setSearchResults(results);
    }, [searchTerm, playerList]);
  
  
    const displayPhoneToolTip = (userId) =&gt; e =&gt; {
      e.preventDefault();
      setPhoneTooltip(userId); // show tooltip
      setTimeout(() =&gt; {
        setPhoneTooltip(false); // remove/hide tooltip
      }, 4000);
    };
  
    const showDeleteIcon = (privilege) =&gt; {
      if (privilege === &quot;ADMIN&quot;) {
        setDeleteIcon({ show: true })
      } else {
        setDeleteIcon({ show: false })
      }
    }
    const deletePlayer = (id) =&gt; e =&gt; {
      setPlayerId(id);
      setDeleteDialog(true);
    }
  
    const onDelete = id =&gt; () =&gt; {
      try {
        Axios.delete('http://localhost:8000/service/player', {
          headers: {
            'Content-Type': 'application/json'
          },
          data: {
            'id': id
          }
        });
        setDeleteDialog(false);
        const restOfPlayerResults = searchResults.filter((result) =&gt; result.id !== id)
        setSearchResults(restOfPlayerResults);
      } catch (e) {
        console.log(e);
      }
    }
  
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;wrapper&quot;&gt;
          &lt;div className=&quot;playerList_header&quot;&gt;
            &lt;h2&gt;Players&lt;/h2&gt;
            &lt;label&gt;
              &lt;div className=&quot;playerSearch_Home&quot;&gt;
                &lt;div className=&quot;playerSearch_Icon&quot;&gt;
                  &lt;img alt=&quot;&quot; src=&quot;/images/search-image-player.jpg&quot;&gt;&lt;/img&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; className=&quot;playerSearch_Home_Input&quot; placeholder=&quot;Search players...&quot; value={searchTerm} onChange={handleChange} /&gt;
              &lt;/div&gt;
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div&gt;
          {!searchResults.length &amp;&amp; !isLoading &amp;&amp; (&lt;div&gt; &lt;p className=&quot;noSearchData&quot;&gt; Does not match any results! &lt;/p&gt; &lt;/div&gt;)}
          &lt;div className=&quot;playerList_home_page&quot;&gt;
          {isLoading ? (
          &lt;div className=&quot;loader&quot;&gt;
          &lt;div className=&quot;bubble&quot;&gt;&lt;/div&gt;
          &lt;div className=&quot;bubble&quot;&gt;&lt;/div&gt;
          &lt;div className=&quot;bubble&quot;&gt;&lt;/div&gt;
          &lt;div className=&quot;bubble&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        ) : (
            &lt;div className=&quot;grid-container&quot;&gt;
              {
                searchResults.map(({ id, photo, position, phonenumber, name }) =&gt; (
                  &lt;div key={id} className=&quot;grid-item&quot;&gt;
                    {
                      deleteIcon.show &amp;&amp; (
                        &lt;span className=&quot;deletePlayerButton&quot; onClick={deletePlayer(id)}&gt;
                          &lt;img className=&quot;deletePlayerimg&quot; src=&quot;/images/delete.png&quot;&gt;&lt;/img&gt;
                        &lt;/span&gt;
                      )}
                    &lt;div&gt;
                      &lt;img alt=&quot;&quot; className=&quot;playerProfilePic_home_tile&quot; key={photo} src={photo}&gt;&lt;/img&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;playerProfile_grid_border&quot;&gt;
                      &lt;span className=&quot;rec_name_position_data&quot;&gt;
                        &lt;h3 key={name}&gt;{name}&lt;/h3&gt;
                        &lt;span className=&quot;playerPosition_home_tile&quot; key={position}&gt;{position}&lt;/span&gt;
                      &lt;/span&gt;
                    &lt;/div&gt;
                    &lt;span className=&quot;phoneNumber_home&quot;&gt;
                      &lt;img src=&quot;/images/phone.png&quot; alt={&quot;phoneTooltip.show&quot;} key={id} name=&quot;phoneNumberhomeicon&quot; onClick={displayPhoneToolTip(id)} /&gt;
                    &lt;/span&gt;
                    {phoneTooltip === id &amp;&amp; (
                      &lt;div className=&quot;tooltip_PhoneNumber_home&quot; key={phonenumber}&gt;{phonenumber}&lt;/div&gt;
                    )}
                  &lt;/div&gt;
                ))
              }
            &lt;/div&gt;
           )}
          &lt;/div&gt;
         &lt;/div&gt; 
        &lt;/div&gt;
        &lt;AlertDialog
          onDelete={onDelete}
          open={deleteDialog}
          onClose={() =&gt; setDeleteDialog(false)}
          playerId={playerId}
        /&gt;
      &lt;/div&gt;
    );
  }
  
  export default Home;
  </code></pre>