Viewing github.com/facebook/react/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js

```
/**
```

 * Copyright (c) Meta Platforms, Inc. and affiliates.

```
 *
```

 * This source code is licensed under the MIT license found in the

 * LICENSE file in the root directory of this source tree.

```
 *
```
```
 * @flow
```
```
 */
```
```
import * as React from 'react';
```
```
import {Fragment} from 'react';
```

import styles from './EditableValue.css';

import {useEditableValue} from '../hooks';

type OverrideValueFn = (path: Array<string | number>, value: any) => void;

```
type EditableValueProps = {
```
```
  className?: string,
```
```
  overrideValue: OverrideValueFn,
```
```
  path: Array<string | number>,
```
```
  value: any,
```
```
};
```

export default function EditableValue({

```
  className = '',
```
```
  overrideValue,
```
```
  path,
```
```
  value,
```
```
}: EditableValueProps): React.Node {
```

  const [state, dispatch] = useEditableValue(value);

  const {editableValue, hasPendingChanges, isValid, parsedValue} = state;

```
  const reset = () =>
```
```
    dispatch({
```
```
      type: 'RESET',
```
```
      externalValue: value,
```
```
    });
```
```
  // $FlowFixMe[missing-local-annot]
```
```
  const handleChange = ({target}) =>
```
```
    dispatch({
```
```
      type: 'UPDATE',
```
```
      editableValue: target.value,
```
```
      externalValue: value,
```
```
    });
```
```
  // $FlowFixMe[missing-local-annot]
```

  const handleCheckBoxToggle = ({target}) => {

```
    dispatch({
```
```
      type: 'UPDATE',
```
```
      editableValue: target.checked,
```
```
      externalValue: value,
```
```
    });
```

    // Unlike <input type="text"> which has both an onChange and an onBlur,

    // <input type="checkbox"> updates state *and* applies changes in a single event.

    // So we read from target.checked rather than parsedValue (which has not yet updated).

    // We also don't check isValid (because that hasn't changed yet either);

    // we don't need to check it anyway, since target.checked is always a boolean.

    overrideValue(path, target.checked);

```
  };
```
```
  // $FlowFixMe[missing-local-annot]
```
```
  const handleKeyDown = event => {
```

    // Prevent keydown events from e.g. change selected element in the tree

```
    event.stopPropagation();
```
```
    switch (event.key) {
```
```
      case 'Enter':
```
```
        applyChanges();
```
```
        break;
```
```
      case 'Escape':
```
```
        reset();
```
```
        break;
```
```
      default:
```
```
        break;
```
```
    }
```
```
  };
```
```
  const applyChanges = () => {
```

    if (isValid && hasPendingChanges) {

      overrideValue(path, parsedValue);

```
    }
```
```
  };
```
```
  let placeholder = '';
```
```
  if (editableValue === undefined) {
```
```
    placeholder = '(undefined)';
```
```
  } else {
```
```
    placeholder = 'Enter valid JSON';
```
```
  }
```

  const isBool = parsedValue === true || parsedValue === false;

```
  return (
```
```
    <Fragment>
```
```
      <input
```
```
        autoComplete="new-password"
```

        className={`${isValid ? styles.Input : styles.Invalid} ${className}`}

```
        data-testname="EditableValue"
```
```
        onBlur={applyChanges}
```
```
        onChange={handleChange}
```
```
        onKeyDown={handleKeyDown}
```
```
        placeholder={placeholder}
```
```
        type="text"
```
```
        value={editableValue}
```
```
      />
```
```
      {isBool && (
```
```
        <input
```
```
          className={styles.Checkbox}
```
```
          checked={parsedValue}
```
```
          type="checkbox"
```

          onChange={handleCheckBoxToggle}

```
        />
```
```
      )}
```
```
    </Fragment>
```
```
  );
```
```
}
```

About Sign Up Leave Feedback Contact