Data is displayed as undefined on reactjs

November 20, 2021

I have login service which uses jwt. After login, user is redirected to profile page. I called the service which takes the data from the database which works very well. I can see all the logs on console but when I return the name in the html part, I can not see the name. It is written as "undefined".

const currentUser = AuthService.user();
let token = localStorage.getItem('User');

let name;

 authenticationService.findUser(jwt_decode(token)["sub"]).then (response => response.json())
  .then(response=> {
   name = response.name;
   console.log(name);
   console.log(data);
});

return (
  <div>
<h1>{name}</h1>
  </div>
   );

>Solution :

{name} in h1 in your return is not definied.

I think the problem is that you assigned name=response.name in fetch function.
You should call here setState if you are using class component or setName if you are using hooks, for example [name,setName] = useState(”)