use-callback-component.jsx

// Is this possible to do?

const ListComponent = ({ items, Actions }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>
        {item.name} <Actions item={item} />
      </li>
    ))}
  </ul>
);

const ListContainer = ({ items }) => {
  const [selected, setSelected] = useState();
  
  const Actions = useCallback(
    ({ item }) => {
      const [clicked, setClicked] = useState(false);
      
      const handleClick = useCallback(
        () => {
          setClicked(true); 
          setSelected(item);
         },
        [item]
      );
      
      return (
        <button onClick={handleClick}>
          {clicked ? 'Clicked' : selected ? 'Selected' : 'Select'}
        </button>
      );
    },
    [selected]
  );
  
  return (
    <>
      {selected.name}
      <ListComponent items={items} Actions={Actions} />
    </>
  );
};