Render Props Pattern (Sharing logic between components)

import { BrowserRouter as Router, Route } from "react-router-dom";

const App = () => (
  <Router>
    <Route
      path="/user"
      render={() => <h1>User Page</h1>}
    />
  </Router>
);

<Controller
        control={control}
        name="ReactDatepicker"
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange} 
            onBlur={onBlur} 
            selected={value}
          />
       )}
/>

    <Title render={() => <h1>  Hello, I am Yeasin !</h1>} />

const Title = (props) => props.render();

const Title = ({
  render,
  bgColor = "bg-gray-100",
}: {
  render: () => React.ReactNode;
  bgColor?: string;
}) => {
  return (
    <div className={`p-4 rounded-lg shadow-md ${bgColor}`}>
      <h1 className="text-2xl font-bold text-blue-600">{render()}</h1>
      <p className="text-sm text-gray-500 mt-2">
        This is a dynamically styled title component.
      </p>
    </div>
  );
};

  <Title bgColor="bg-yellow-100" render={() => <span>Dynamic Render Props!</span>} />

<Title/>
Title()

/src
 ├── components
 │   ├── FetchUsers.tsx  <-- Render Props Component
 │   ├── UserList.tsx    <-- Uses FetchUsers
 │   └── UserCard.tsx    <-- (Optional) Single user item component
 ├── App.tsx
 ├── main.tsx

import { useEffect, useState } from "react";

export interface User {
  id: number;
  name: string;
  email: string;
}

interface FetchUsersProps {
  render: (users: User[]) => JSX.Element;
}

const FetchUsers = ({ render }: FetchUsersProps) => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data))
      .catch((err) => console.error("Error fetching users:", err));
  }, []);

  return render(users); 
  // Or with any style:  return <div> styling and then: render(users);  </div>
};

export default FetchUsers;

import { User } from "./FetchUsers";

const UserCard = ({ user }: { user: User }) => {
  return (
    <li key={user.id} className="border-b p-2">
      <strong>{user.name}</strong> - {user.email}
    </li>
  );
};

export default UserCard;

import FetchUsers from "./FetchUsers";
import UserCard from "./UserCard";

const UserList = () => {
  return (
    <FetchUsers
      render={(users) => (
        <div className="rounded-lg bg-gray-100 p-4">
          <h2 className="mb-2 text-lg font-bold">User List</h2>
          <ul>
            {users.map((user) => (
              <UserCard key={user.id} user={user} />
            ))}
          </ul>
        </div>
      )}
    />
  );
};

export default UserList;

import UserList from "./components/UserList";

const App = () => {
  return (
    <div className="container mx-auto p-4">
      <UserList />
    </div>
  );
};

export default App;