List() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ List() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-shared/src/hooks/__tests__/__source__/ToDoList.js lines 37–128

export function List(props) {
  const [newItemText, setNewItemText] = useState('');
  const [items, setItems] = useState([
    {id: 1, isComplete: true, text: 'First'},
    {id: 2, isComplete: true, text: 'Second'},
    {id: 3, isComplete: false, text: 'Third'},
  ]);
  const [uid, setUID] = useState(4);

  const handleClick = useCallback(() => {
    if (newItemText !== '') {
      setItems([
        ...items,
        {
          id: uid,
          isComplete: false,
          text: newItemText,
        },
      ]);
      setUID(uid + 1);
      setNewItemText('');
    }
  }, [newItemText, items, uid]);

  const handleKeyPress = useCallback(
    event => {
      if (event.key === 'Enter') {
        handleClick();
      }
    },
    [handleClick],
  );

  const handleChange = useCallback(
    event => {
      setNewItemText(event.currentTarget.value);
    },
    [setNewItemText],
  );

  const removeItem = useCallback(
    itemToRemove => setItems(items.filter(item => item !== itemToRemove)),
    [items],
  );

  const toggleItem = useCallback(
    itemToToggle => {
      // Dont use indexOf()
      // because editing props in DevTools creates a new Object.
      const index = items.findIndex(item => item.id === itemToToggle.id);

      setItems(
        items
          .slice(0, index)
          .concat({
            ...itemToToggle,
            isComplete: !itemToToggle.isComplete,
          })
          .concat(items.slice(index + 1)),
      );
    },
    [items],
  );

  return (
    <Fragment>
      <h1>List</h1>
      <input
        type="text"
        placeholder="New list item..."
        value={newItemText}
        onChange={handleChange}
        onKeyPress={handleKeyPress}
      />
      <button disabled={newItemText === ''} onClick={handleClick}>
        <span role="img" aria-label="Add item">
          Add
        </span>
      </button>
      <ul>
        {items.map(item => (