Extracting Repeatable Fragments with Functional Components

Create a functional component that returns a fragment, allowing the reuse of fragment templates in different parts of the application.

const UserDetailsFragment = ({ user }) => (
  <>
    <h3>{user.name}</h3>
    <p>Email: {user.email}</p>
    <p>Age: {user.age}</p>
  </>
);

This component is a functional component that takes a 'user' object as props and returns a fragment containing user details. The fragment includes a heading with the user's name and paragraphs for the user's email and age.

const App = () => (
  <div>
    <UserDetailsFragment user={{ name: 'John Doe', email: 'john@example.com', age: 30 }} />
    <UserDetailsFragment user={{ name: 'Jane Smith', email: 'jane@example.com', age: 25 }} />
  </div>
);

This is the 'App' component that uses the 'UserDetailsFragment' functional component to render user details for two different users. It shows how the fragment can be reused with different user data.