Tạo một component PasswordChangeForm trong ReactJS

npx create-react-app react-password-change-form
cd react-password-change-form

import React, { useState } from 'react';
import './PasswordChangeForm.css';

const PasswordChangeForm = () => {
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const handleChangeCurrentPassword = (e) => {
    setCurrentPassword(e.target.value);
  };

  const handleChangeNewPassword = (e) => {
    setNewPassword(e.target.value);
  };

  const handleChangeConfirmPassword = (e) => {
    setConfirmPassword(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    // Kiểm tra mật khẩu mới và xác nhận mật khẩu mới
    if (newPassword === confirmPassword) {
      console.log('Mật khẩu hiện tại:', currentPassword);
      console.log('Mật khẩu mới:', newPassword);
      console.log('Xác nhận mật khẩu mới:', confirmPassword);
      // Thêm logic xử lý thay đổi mật khẩu ở đây (ví dụ: gửi đến API, lưu vào state, ...)
      setCurrentPassword('');
      setNewPassword('');
      setConfirmPassword('');
    } else {
      console.error('Mật khẩu mới và xác nhận mật khẩu mới không khớp.');
    }
  };

  return (
    <div className="password-change-form-container">
      <form onSubmit={handleSubmit}>
        <label>
          Mật khẩu hiện tại:
          <input
            type="password"
            value={currentPassword}
            onChange={handleChangeCurrentPassword}
          />
        </label>
        <br />
        <label>
          Mật khẩu mới:
          <input
            type="password"
            value={newPassword}
            onChange={handleChangeNewPassword}
          />
        </label>
        <br />
        <label>
          Xác nhận mật khẩu mới:
          <input
            type="password"
            value={confirmPassword}
            onChange={handleChangeConfirmPassword}
          />
        </label>
        <br />
        <button type="submit">Thay Đổi Mật Khẩu</button>
      </form>
    </div>
  );
};

export default PasswordChangeForm;

.password-change-form-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 8px;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #4caf50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

import React from 'react';
import PasswordChangeForm from './PasswordChangeForm';

function App() {
  return (
    <div className="App">
      <h1>React Password Change Form Exercise</h1>
      <PasswordChangeForm />
    </div>
  );
}

export default App;

npm start