npx create-react-app react-server-state
cd react-server-state
npm install react-server-dom

// ServerStateComponent.js
import React from 'react';

export default function ServerStateComponent() {
  // <mark>Giả lập state phía server</mark>
  let serverState = {
    user: 'John Doe',
    role: 'admin'
  };

  return (
    <>
      <h1>User Information (Server Side)</h1>
      <p>Name: {serverState.user}</p>
      <p>Role: {serverState.role}</p>
    </>
  );
}

// UpdateUserComponent.js
import React, { useState } from 'react';

export default function UpdateUserComponent() {
  const [user, setUser] = useState('');

  const handleChange = (e) => {
    setUser(e.target.value);
  };

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

    // Giả lập cập nhật state phía server
    console.log(`User updated to: ${user}`);

    // Trong thực tế: Gửi thông tin lên server qua API
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Update User:
        <input type="text" value={user} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

// App.js
import React, { useState, useEffect } from 'react';
import ServerStateComponent from './ServerStateComponent';
import UpdateUserComponent from './UpdateUserComponent';

function App() {
  const [serverState, setServerState] = useState({ user: '', role: '' });

  useEffect(() => {
    const fetchServerState = async () => {
      // Giả lập gọi server lấy state hiện tại
      const state = { user: 'Jane Doe', role: 'editor' };
      setServerState(state);
    };

    fetchServerState();
  }, []);

  return (
    <>
      <h1>React Server Components with State Management</h1>
      <h2>Current Server-Side State:</h2>
      <p>User: {serverState.user}</p>
      <p>Role: {serverState.role}</p>
      <UpdateUserComponent />
      <ServerStateComponent />
    </>
  );
}

export default App;