ReactJS Design Pattern ~Function Children Pattern~

・Instead of passing JSX as children, you pass a function that receives arguments from the parent component. This pattern allows the parent to share data with its children while keeping the rendering logic flexible.

function DataProvider({ children }) {
  const user = {
    name: "John Doe",
    email: "[e-mail]",
    role: "Developer",
  };

  return children(user);
}

function App() {
  return (
    <div>
      <h1>Function Children Pattern</h1>
      <DataProvider>
        {(user) => {
          return (
            <div>
              <h2>{user.name}</h2>
              <p>{user.email}</p>
              <p>{user.role}</p>
            </div>
          );
        }}
      </DataProvider>
    </div>
  );
}

export default App;