List() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ List() — react Function Reference

Dependency Diagram

graph TD
  92c1987c_8575_a4cb_ca9b_aa8d509a1b2a["List()"]
  c0933170_04c4_21bd_1ed5_38c7df2e0db6["ListApp.js"]
  92c1987c_8575_a4cb_ca9b_aa8d509a1b2a -->|defined in| c0933170_04c4_21bd_1ed5_38c7df2e0db6
  style 92c1987c_8575_a4cb_ca9b_aa8d509a1b2a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shell/src/e2e-apps/ListApp.js lines 17–44

function List() {
  const [items, setItems] = useState(['one', 'two', 'three']);
  const inputRef = useRef(null);

  const addItem = () => {
    const input = ((inputRef.current: any): HTMLInputElement);
    const text = input.value;
    input.value = '';

    if (text) {
      setItems([...items, text]);
    }
  };

  return (
    <>
      <input ref={inputRef} data-testname="AddItemInput" />
      <button data-testname="AddItemButton" onClick={addItem}>
        Add Item
      </button>
      <ul data-testname="List">
        {items.map((label, index) => (
          <ListItem key={index} label={label} />
        ))}
      </ul>
    </>
  );
}