ListItem() — react Function Reference

Architecture documentation for the ListItem() function in ListItem.js from the react codebase.

Function javascript CompilerCore Suppression

Entity Profile

CompilerCore→ Suppression→ ListItem() — react Function Reference

Dependency Diagram

graph TD
  d6ee31ac_8381_11fd_8770_ad8b78a29170["ListItem()"]
  f826848f_64b3_a5ac_bf27_9d2e3747442c["ListItem.js"]
  d6ee31ac_8381_11fd_8770_ad8b78a29170 -->|defined in| f826848f_64b3_a5ac_bf27_9d2e3747442c
  style d6ee31ac_8381_11fd_8770_ad8b78a29170 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shell/src/app/ToDoList/ListItem.js lines 22–47

function ListItem({item, removeItem, toggleItem}: Props) {
  const handleDelete = useCallback(() => {
    removeItem(item);
  }, [item, removeItem]);

  const handleToggle = useCallback(() => {
    toggleItem(item);
  }, [item, toggleItem]);

  return (
    <li className={styles.ListItem}>
      <button className={styles.IconButton} onClick={handleDelete}>
        🗑
      </button>
      <label className={styles.Label}>
        <input
          className={styles.Input}
          checked={item.isComplete}
          onChange={handleToggle}
          type="checkbox"
        />{' '}
        {item.text}
      </label>
    </li>
  );
}