In this post, I am going to explain the how to create a simple functional UserInfo page using React. This page will allow users to view and edit their personal details, such as their name, email, and age, all within an interactive interface.
I am going to use following techniques to build this page.
1. State Management: Manage the user information with React's useState hook to store and update user details dynamically.
2. Conditional Rendering: Used to toggle between edit and view modes, enabling users to switch seamlessly between viewing their information and editing it.
By the end of this tutorial, you will have a fully functional UserInfo page that not only displays user details but also allows users to edit and save changes effortlessly.
Define user component
export default function User({ user }) {
Here, we define the User component, which takes a user prop. This prop represents the initial user information we will display and allow editing for.
State Management
const [userInfo, setUserInfo] = useState(user);
const [isEditing, setIsEditing] = useState(false); // Default to non-edit mode
We use two pieces of state here,
1. userInfo: This holds the current user details, initialized with the user prop.
2. isEditing: This boolean state tracks whether the component is in edit mode. It starts as false, meaning the user details are displayed in a read-only format.
Saving User Details
function saveUserDetails(event) {
event.preventDefault();
setIsEditing(false); // Switch back to view mode after saving
// Add logic to persist data if necessary
}
The saveUserDetails function handles the form submission. It prevents the default behavior of the form (which would typically cause a page refresh) and switches the state back to view mode. Here, you can also add logic to persist the user data, such as sending it to a server or saving it locally.
Conditional Rendering of User Info
const contentToDisplay = isEditing ? (
<>
{/* Editable fields for user information */}
</>
) : (
<>
{/* Display user information */}
</>
);
The contentToDisplay variable uses a ternary operator to conditionally render either editable input fields or the read-only user information based on the isEditing state:
1. If isEditing is true, input fields for the username, email, and age are rendered, allowing users to modify their details.
2. If isEditing is false, the user's current information is displayed.
Handling Input Changes
Inside the editable section, we use onChange handlers for each input field. Following snippet highlight the onChange event handler for username text field.
onChange={(event) => setUserInfo({
...userInfo,
name: event.target.value,
})}
These handlers update the corresponding property in the userInfo state whenever the user types into the input fields. The spread operator (...userInfo) ensures that other properties remain unchanged.
Rendering the Form
return (
<form onSubmit={saveUserDetails}>
{contentToDisplay}
<br />
<button type="button" onClick={() => setIsEditing(!isEditing)}>
{isEditing ? "Save" : "Edit"}
</button>
</form>
);
Finally, the return statement renders the form containing contentToDisplay and a button that toggles between "Edit" and "Save." The button's onClick event calls a function to switch the isEditing state, allowing users to enter or save their changes.
Follow below step-by-step procedure to build the complete working application.
Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘editable_user’.
Project structure looks like below.
Step 2: Create components folder in src/ folder and define User component.
User.jsx
import { useState } from "react";
export default function User({ user }) {
const [userInfo, setUserInfo] = useState(user);
const [isEditing, setIsEditing] = useState(false); // Default to non-edit mode
// Save user details or handle form validation
function saveUserDetails(event) {
event.preventDefault();
setIsEditing(false); // Switch back to view mode after saving
// Add logic to persist data if necessary
}
// JSX for displaying or editing user info
const contentToDisplay = isEditing ? (
<>
<label>Username : </label>
<input
type="text"
value={userInfo.name}
onChange={(event) => setUserInfo({
...userInfo,
name: event.target.value,
})}
/>
<br />
<label>Email : </label>
<input
type="email"
value={userInfo.email}
onChange={(event) => setUserInfo({
...userInfo,
email: event.target.value,
})}
/>
<br />
<label>Age : </label>
<input
type="text"
value={userInfo.age}
onChange={(event) => setUserInfo({
...userInfo,
age: event.target.value,
})}
/>
<br />
</>
) : (
<>
<label>Username : {userInfo.name}</label>
<br />
<label>Email : {userInfo.email}</label>
<br />
<label>Age : {userInfo.age}</label>
<br />
</>
);
return (
<form onSubmit={saveUserDetails}>
{contentToDisplay}
<br />
{/* Toggle between Edit and Save button */}
<button type="button" onClick={() => setIsEditing(!isEditing)}>
{isEditing ? "Save" : "Edit"}
</button>
</form>
);
}
Step 3: Update main.jsx like below.
main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import User from "./components/User";
const userDetails = {
name: "Krishna",
age: 34,
email: "krishna@abc.com",
};
createRoot(document.getElementById("root")).render(
<StrictMode>
<User user={userDetails} />
</StrictMode>
);
Step 4: Build and run the Application by executing below commands.
cd editable_user npm install npm run dev
Open the url ‘http://localhost:5173/’ in browser, you will see below screen.
Click on Edit button to update the user information.
You can download this Application from this link.
Previous Next Home
No comments:
Post a Comment