Frontend-Backend Separation: How to Display the Username

To display the username after separating frontend and backend, follow these steps:

Store Username in State: Use React’s useState to manage the username state on the frontend.
Fetch Username from Backend:
Create an API endpoint (e.g., /api/users/me) that returns the logged-in user’s data.
Use Axios or fetch to call this endpoint in a function, updating the state with the received username.
Handle Loading and Errors:
Implement loading states using useState to disable buttons or show spinners while fetching.
Add error handling to catch issues and display messages to the user.
Display Username: Use the stored username in components, such as showing a welcome message.

Example code:

import axios from ‘axios’;
import { useState } from ‘react’;

function Header() {
  const [username, setUsername] = useState(”);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(”);

  async function fetchUsername() {
    try {
      const response = await axios.get(‘/api/users/me’);
      setUsername(response.data.username);
    } catch (err) {
      setError(‘Failed to fetch username. Please try again.’);
    } finally {
      setLoading(false);
    }
  }

  if (loading) return <div>Loading…</div>;

  return (
    <header>
      {error && <p className=”error”>{error}</p>}
      <h1>Welcome back, {username}!</h1>
    </header>
  );
}

import axios from ‘axios’;

import { useState } from ‘react’;

function Header() {

const [username, setUsername] = useState(”);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(”);

async function fetchUsername() {

try {

const response = await axios.get(‘/api/users/me’);

setUsername(response.data.username);

} catch (err) {

setError(‘Failed to fetch username. Please try again.’);

} finally {

setLoading(false);

}

if (loading) return <div>Loading...</div>;

return (

{error && <p className=“error”>{error}</p>}

<h1>Welcome back, {username}!</h1>

</header>

);

}

This approach separates concerns and ensures the frontend only displays data fetched from the backend.

5 responses to “Frontend-Backend Separation: How to Display the Username”

Perfect guide for anyone looking to fetch and display the logged-in username in their React app. The example code is clean and easy to follow.

Log in to Reply
This is a solid solution for fetching and displaying user data. I especially like how it handles potential errors and loading states, making the application more robust.

Log in to Reply
The article does a good job breaking down the process into manageable steps. The use of useState and Axios makes it straightforward to implement.

Log in to Reply
I found this approach very effective for managing user authentication in React applications. It’s great that it includes error handling and loading states to improve the user experience.

Log in to Reply
This article provides a clear and concise guide on displaying the username after separating frontend and backend. The steps are well-explained, and the example code helps in understanding the implementation.

Log in to Reply

IT Log

Frontend-Backend Separation: How to Display the Username

5 responses to “Frontend-Backend Separation: How to Display the Username”

Leave a Reply Cancel reply