List() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ List() — react Function Reference

Dependency Diagram

graph TD
  c8099e13_d24a_e1a3_622d_54ebb2d781fd["List()"]
  c6d03b42_905f_86b0_4357_be045cd7fe1e["index.js"]
  c8099e13_d24a_e1a3_622d_54ebb2d781fd -->|defined in| c6d03b42_905f_86b0_4357_be045cd7fe1e
  style c8099e13_d24a_e1a3_622d_54ebb2d781fd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js lines 288–388

function List(props) {
  const [newItemText, setNewItemText] = React.useState('');
  const [items, setItems] = React.useState([{
    id: 1,
    isComplete: true,
    text: 'First'
  }, {
    id: 2,
    isComplete: true,
    text: 'Second'
  }, {
    id: 3,
    isComplete: false,
    text: 'Third'
  }]);
  const [uid, setUID] = React.useState(4);
  const handleClick = React.useCallback(() => {
    if (newItemText !== '') {
      setItems([...items, {
        id: uid,
        isComplete: false,
        text: newItemText
      }]);
      setUID(uid + 1);
      setNewItemText('');
    }
  }, [newItemText, items, uid]);
  const handleKeyPress = React.useCallback(event => {
    if (event.key === 'Enter') {
      handleClick();
    }
  }, [handleClick]);
  const handleChange = React.useCallback(event => {
    setNewItemText(event.currentTarget.value);
  }, [setNewItemText]);
  const removeItem = React.useCallback(itemToRemove => setItems(items.filter(item => item !== itemToRemove)), [items]);
  const toggleItem = React.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 /*#__PURE__*/React.createElement(React.Fragment, {
    __source: {
      fileName: _jsxFileName$5,
      lineNumber: 102,
      columnNumber: 5
    }
  }, /*#__PURE__*/React.createElement("h1", {
    __source: {
      fileName: _jsxFileName$5,
      lineNumber: 103,
      columnNumber: 7
    }
  }, "List"), /*#__PURE__*/React.createElement("input", {
    type: "text",
    placeholder: "New list item...",
    value: newItemText,
    onChange: handleChange,
    onKeyPress: handleKeyPress,
    __source: {
      fileName: _jsxFileName$5,
      lineNumber: 104,
      columnNumber: 7
    }
  }), /*#__PURE__*/React.createElement("button", {
    disabled: newItemText === '',
    onClick: handleClick,
    __source: {
      fileName: _jsxFileName$5,
      lineNumber: 111,
      columnNumber: 7
    }
  }, /*#__PURE__*/React.createElement("span", {
    role: "img",
    "aria-label": "Add item",
    __source: {
      fileName: _jsxFileName$5,
      lineNumber: 112,