NewArrayValue() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ NewArrayValue() — react Function Reference

Dependency Diagram

graph TD
  fafa7f21_728a_fa34_ea0d_ee1f2426e2aa["NewArrayValue()"]
  bb770434_43dc_71aa_77ec_098236a83413["NewArrayValue.js"]
  fafa7f21_728a_fa34_ea0d_ee1f2426e2aa -->|defined in| bb770434_43dc_71aa_77ec_098236a83413
  style fafa7f21_728a_fa34_ea0d_ee1f2426e2aa fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js lines 33–108

export default function NewArrayValue({
  bridge,
  depth,
  hidden,
  hookID,
  index,
  inspectedElement,
  path,
  store,
  type,
}: Props): React.Node {
  const [key, setKey] = useState<number>(0);
  const [isInvalid, setIsInvalid] = useState(false);

  // This is a bit of an unusual usage of the EditableName component,
  // but otherwise it acts the way we want for a new Array entry.
  // $FlowFixMe[missing-local-annot]
  const overrideName = (oldPath: any, newPath) => {
    const value = newPath[newPath.length - 1];

    let parsedValue;
    let newIsInvalid = true;
    try {
      parsedValue = smartParse(value);
      newIsInvalid = false;
    } catch (error) {}

    if (isInvalid !== newIsInvalid) {
      setIsInvalid(newIsInvalid);
    }

    if (!newIsInvalid) {
      setKey(key + 1);

      const {id} = inspectedElement;
      const rendererID = store.getRendererIDForElement(id);
      if (rendererID !== null) {
        let basePath = path;
        if (hookID != null) {
          basePath = parseHookPathForEdit(basePath);
        }

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

  return (
    <div
      key={key}
      hidden={hidden}
      style={{
        paddingLeft: `${(depth - 1) * 0.75}rem`,
      }}>
      <div className={styles.NewArrayValue}>
        <EditableName
          allowWhiteSpace={true}
          autoFocus={key > 0}
          className={[styles.EditableName, isInvalid && styles.Invalid].join(
            ' ',
          )}
          initialValue=""
          overrideName={overrideName}
          path={path}
        />
      </div>
    </div>
  );
}