ListItem() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ ListItem() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-shared/src/hooks/__tests__/__source__/ToDoList.js lines 13–35

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

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

  return (
    <li>
      <button onClick={handleDelete}>Delete</button>
      <label>
        <input
          checked={item.isComplete}
          onChange={handleToggle}
          type="checkbox"
        />{' '}
        {item.text}
      </label>
    </li>
  );
}