Displaying User Details in React Using Multiple Components

In this post, we will explore how to structure and display user data in React by breaking the logic into three reusable components: User, Address, and UsersDetails.

We will take a flat list of user data (including properties like id, name, age, city, state, and country) and split it into meaningful components, demonstrating how to handle data separation and component-based architecture in React. This approach will make your code more modular, easier to maintain, and scalable as your application grows.

 

By the end of the post, you will learn how to,

 

1.   Pass data to child components via props.

2.   Manage and display structured data using reusable React components.

3.   Organize user details efficiently in a real-world React application.

 

Example

export default function User({ id, name, age }) {
  return (
    <>
      <h2>User Basic Information</h2>
      <ul>
        <li>id : {id}</li>
        <li>name : {name}</li>
        <li>age : {age}</li>
      </ul>
    </>
  );
}

export default function Address({ city, state, country }) {
  return (
    <>
      <p>Address : </p>
      <address>
        {city},{state},{country}
      </address>
    </>
  );
}

import User from "./User";
import Address from "./Address";

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

 

In the above code snippet, I defined three components: User, Address, and UsersInfo. The data is passed down from the parent component (UsersInfo) to the child components (User and Address) using props.

 

1. User Component

This component is responsible for displaying the basic information of a user, such as id, name, and age.  The component receives id, name, and age as props, which are extracted from the users array in the parent component (UsersInfo).  It renders this information inside an unordered list (<ul>).

 

2. Address Component

This component handles the address-related information like city, state, and country.  It receives city, state, and country from the users array via the parent component (UsersInfo). It renders the address in a semantic <address> tag.

 

3. UsersInfo Component (Parent Component)

This component is responsible for managing the list of users and passing individual user details to the User and Address components. This component receives an array of users as a prop. Each object in the users array contains user data like id, name, age, city, state, and country. This component uses the .map() method to loop over the users array and renders the User and Address components for each user.

 

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-address-mapping-demo’. Project structure looks like below.

 

Step 2: Create components folder in src/ folder and define following components

 

1.   User.jsx

2.   Address.jsx

3.   UsersInfo.jsx

 

User.jsx

export default function User({ id, name, age }) {
  return (
    <>
      <h2>User Basic Information</h2>
      <ul>
        <li>id : {id}</li>
        <li>name : {name}</li>
        <li>age : {age}</li>
      </ul>
    </>
  );
}

Address.jsx

export default function Address({ city, state, country }) {
  return (
    <>
      <p>Address : </p>
      <address>
        {city},{state},{country}
      </address>
    </>
  );
}

Usersinfo.jsx

import User from "./User";
import Address from "./Address";

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

Step 3: Update main.jsx file like below.

 

main.jsx

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

const users = [
  {
    id : 1,
    name : "Krishna",
    age : 36,
    city : "Banaglore",
    state : "Karnataka",
    country : "India"
  },
  {
    id : 2,
    name : "Ram",
    age : 39,
    city : "Hyderabad",
    state : "Andhra Pradesh",
    country : "India"
  }
]
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <UsersInfo users={users}/>
  </StrictMode>,
)

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

  cd user-address-mapping-demo
  npm install
  npm run dev

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

You can download this application from this link.

Previous                                                    Next                                                    Home