Displaying Details trong ReactJS

Trong bài tập này, mình thực hiện mở rộng ứng dụng hiện tại để có khả năng hiển thị thông tin chi tiết của một người dùng khi họ được chọn từ danh sách. Điều này sẽ cung cấp một trải nghiệm tốt hơn cho người dùng và làm cho ứng dụng của mình trở nên hoàn thiện hơn.

Tạo một ứng dụng React hiển thị danh sách người dùng trong ReactJS

Trước tiên, mình sẽ cần tạo một component mới để hiển thị thông tin chi tiết của người dùng. Tạo một file mới có tên là UserDetail.js trong thư mục src/components. Dưới đây là nội dung của file UserDetail.js:

// src/components/UserDetail.js
import React from 'react';

const UserDetail = ({ user }) => {
  return (
    <div>
      <h2>User Details</h2>
      <p><strong>Name:</strong> {user.name}</p>
      <p><strong>Email:</strong> {user.email}</p>
      <p><strong>Address:</strong> {user.address.street}, {user.address.city}, {user.address.zipcode}</p>
      {/* Thêm thông tin chi tiết khác của người dùng nếu cần */}
    </div>
  );
};

export default UserDetail;

Tiếp theo, mình cần cập nhật component UserList để chuyển đến trang chi tiết khi người dùng nhấp vào một người dùng.

Trong UserList.js, bạn sẽ thêm state để theo dõi người dùng hiện đang được chọn, và một hàm để xử lý sự kiện khi một người dùng được chọn. Dưới đây là cách sửa đổi UserList.js:

// src/components/UserList.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [selectedUser, setSelectedUser] = useState(null);
  const history = useHistory();

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };

    fetchUsers();
  }, []);

  const handleUserClick = (user) => {
    setSelectedUser(user);
    history.push(`/users/${user.id}`);
  };

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id} onClick={() => handleUserClick(user)} style={{ cursor: 'pointer' }}>
            {user.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

Sau đó, mình cần cài đặt React Router để xử lý định tuyến cho trang chi tiết. Chạy lệnh sau trong terminal để cài đặt React Router:

npm install react-router-dom

Tiếp theo, cập nhật file App.js để sử dụng React Router và định tuyến đến trang chi tiết. Dưới đây là nội dung cập nhật của App.js:

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import UserList from './components/UserList';
import UserDetail from './components/UserDetail';

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route path="/" exact component={UserList} />
          <Route path="/users/:userId" component={UserDetail} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Kết bài

Trong bài này, mình đã mở rộng ứng dụng React để hiển thị thông tin chi tiết của một người dùng khi họ được chọn từ danh sách. Mình đã sử dụng React Router để quản lý định tuyến và hiển thị trang chi tiết. Điều này làm cho ứng dụng của mình trở nên hoàn thiện hơn và cung cấp trải nghiệm tốt hơn cho người dùng.

test php

Bài giải

-------------------- ######## --------------------

Câu hỏi thường gặp liên quan:

Cùng chuyên mục:

Bài tập ReactJS: Conditional Rendering trong ReactJS

Bài tập ReactJS: Lists và Keys trong ReactJS

Bài tập ReactJS: Forms và Controlled Components trong ReactJS

Bài tập ReactJS: Handling Events trong ReactJS

Bài tập ReactJS: State và Lifecycle trong ReactJS

Bài tập ReactJS: Components và Props trong ReactJS

Thiết kế và quản lý form đơn giản với thư viện Formik

React Microservices, xây dựng ứng dụng React mạnh mẽ

Xây dựng ứng dụng CRUD với Redux Toolkit cực dễ dàng

Áp dụng Testing vào React cho ứng dụng của bạn như thế nào?

Performance Optimization trong React Js, tăng hiệu suất cực ngon

React Hook là gì? Tại sao React Hook quan trọng trong dự án?

Hiểu Route React nâng cao trong 10 phút bằng ví dụ

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…