NewKeyValue() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ NewKeyValue() — react Function Reference

Dependency Diagram

graph TD
  a6a86905_58d7_fb49_1ae4_1168e4be0901["NewKeyValue()"]
  0e638bf4_827b_30d0_21d6_77d4d615d353["NewKeyValue.js"]
  a6a86905_58d7_fb49_1ae4_1168e4be0901 -->|defined in| 0e638bf4_827b_30d0_21d6_77d4d615d353
  style a6a86905_58d7_fb49_1ae4_1168e4be0901 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js lines 32–105

export default function NewKeyValue({
  bridge,
  depth,
  hidden,
  hookID,
  inspectedElement,
  path,
  store,
  type,
}: Props): React.Node {
  const [newPropKey, setNewPropKey] = useState<number>(0);
  const [newPropName, setNewPropName] = useState<string>('');

  // $FlowFixMe[missing-local-annot]
  const overrideNewEntryName = (oldPath: any, newPath) => {
    setNewPropName(newPath[newPath.length - 1]);
  };

  const overrideNewEntryValue = (
    newPath: Array<string | number>,
    value: any,
  ) => {
    if (!newPropName) {
      return;
    }

    setNewPropName('');
    setNewPropKey(newPropKey + 1);

    const {id} = inspectedElement;
    const rendererID = store.getRendererIDForElement(id);
    if (rendererID !== null) {
      let basePath: Array<string | number> = newPath;
      if (hookID != null) {
        basePath = parseHookPathForEdit(basePath);
      }

      bridge.send('overrideValueAtPath', {
        type,
        hookID,
        id,
        path: basePath,
        rendererID,
        value,
      });
    }
  };

  return (
    <div
      data-testname="NewKeyValue"
      key={newPropKey}
      hidden={hidden}
      style={{
        paddingLeft: `${(depth - 1) * 0.75}rem`,
      }}>
      <div className={styles.NewKeyValue}>
        <EditableName
          autoFocus={newPropKey > 0}
          className={styles.EditableName}
          overrideName={overrideNewEntryName}
          path={[]}
        />
        :&nbsp;
        <EditableValue
          className={styles.EditableValue}
          overrideValue={overrideNewEntryValue}
          path={[...path, newPropName]}
          value={''}
        />
      </div>
    </div>
  );
}