import React, { useState, useEffect } from 'react';
import UserList from './UserList';
export default function UserContainer() {
const [users, setUsers] = useState([]);
useEffect(() => {
// Simulated API call or data fetch
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/users');
const jsonData = await response.json();
setUsers(jsonData);
} catch (error) {
console.error('Error fetching users:', error);
}
};
fetchData();
}, []);
return <UserList users={users} />;
};
Also known as the smart component, holds all functionality, such as fetching and managing user data. Helps improve resusability and maintainability.
import React from 'react';
const UserList = ({ users }) => {
return (
<div>
<h1>User List</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
};
export default UserList;
Also known as the dumb component. Recieves the functionality and data from the Container (smart) component, to present that functionality and data.