Building Reusable User and UsersInfo Components in React

In this post, we will explore how to create a simple structure for managing user information in React. We will build two components

1.   User Component: which will hold individual user details like name, age, and email, and

2.   UsersInfo Component: which will take a list of addresses as props.

 

This example will demonstrate the concept of reusable components, props, and how to effectively send data from parent to child components.

export default function User({ user }) {
  return (
    <>
      <li>
        <p>username : {user.name}</p>
        <p>email : {user.email}</p>
        <p>age : {user.age}</p>
      </li>
    </>
  );
}

export default function UsersInfo({ users }) {
  return (
    <>
      <ul>
        {users.map((user) => (
          <User key={user.id} user={user} />
        ))}
      </ul>
    </>
  );
}

 

Parent Component (UsersInfo)

The UsersInfo component receives a prop called users, which is an array of user objects. Inside the users.map() function, each user object from the array is passed down to the User component as a prop using {user}. This makes the user data accessible in the User component.

 

Child Component (User)

The User component receives the user object as a prop. This allows the User component to access the individual user's name, email, and age properties and render them within the JSX. This is how data flows from the UsersInfo (parent) to the User (child) component via the user prop.

 

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 ‘user-details-modelling’.

 

Project structure looks like below.

 

Step 2: Create components folder in src/ folder and define User and UsersInfo component.

 

User.jsx

export default function User({ user }) {
  return (
    <>
      <li>
        <p>username : {user.name}</p>
        <p>email : {user.email}</p>
        <p>age : {user.age}</p>
      </li>
    </>
  );
}

UsersInfo.jsx

import User from "./User";

export default function UsersInfo({ users }) {
  return (
    <>
      <ul>
        {users.map((user) => (
          <User key={user.id} user={user} />
        ))}
      </ul>
    </>
  );
}

Step 3: Update main.jsx like below.

 

main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import UsersInfo from "./components/UsersInfo";

let users = [
  {
    id: 1,
    name: "Krishna",
    age: 34,
    email: "krishna@abc.com",
  },
  {
    id: 2,
    name: "Lahari",
    age: 36,
    email: "lahari@abc.com",
  },
];
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <UsersInfo users={users} />
  </StrictMode>
);

Step 4: Build and run the Application by executing below commands.

  cd user-details-modelling
  npm install
  npm run dev

Open the url http://localhost:5173/ in browser, you will see below screen.

You can download the application from this link.

 

 

Previous                                                    Next                                                    Home