#16 ColorInput fields throw error

[StephMode]

Tasks

• [x] Investigate error message
• [x] Fix ColorInput comp

Context

Console Message:

Warning: ColorInput contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components input fieldset ColorInput@http://localhost:5173/src/Components/ColorInput/ColorInput.jsx?t=1730566576251:19:35 form ColorForm@http://localhost:5173/src/Components/ColorForm/ColorForm.jsx?t=1730569294891:19:34 App@http://localhost:5173/src/App.jsx?t=1730569294891:27:51 react-dom.development.js:86:29 React 11 workLoop scheduler.development.js:266 flushWork scheduler.development.js:239 performWorkUntilDeadline scheduler.development.js:533 (Async: EventHandlerNonNull) js scheduler.development.js:571 js scheduler.development.js:633 require chunk-LQ2VYIYD.js:8 js index.js:6 require chunk-LQ2VYIYD.js:8 React 2 require chunk-LQ2VYIYD.js:8 js React require chunk-LQ2VYIYD.js:8 js React __require chunk-LQ2VYIYD.js:8

react-dom_client.js:21603

[StephMode]

On controlled / uncontrolled input

According to https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable

Controlled Input makes sense if I need the value to be a state anyway. Example case: re-render UI on every edit.

-> this is not what I need here

Uncontrolled Input is fine if I only want to specfify the initial value without connecting it to a state

==> this is what I need in my case

The error message suggests to specifiy either value or defaultValue, not both.

Assumption: to fix the warning, I need to unset either value or defautValue <input type="text">.

Option 1: I go with 'value'. Downside: I need it in both <input type="text"> and ` to have them linked.

Option 2: I go with 'defaultValue'. Upside: it would not affect the the color picker input. Downside: could impair UX, thus I should briefly check similiar Apps to see of this is standard

[StephMode]

Option 1: I go with 'value'. Downside: I need it in both and ` to have them linked.

Excerpt ColorInput.jsx

export default function ColorInput({ currentColor }) {
  // implement state to give both input fields of respective group same value
  const [hexValue, setHexValue] = useState(currentColor?.hex || "#54c73d");

// implement input handler to give both input fields of respective group same value after input
  const handleHexChange = (event) => {
    setHexValue(event.target.value);
  };

 <input
          id="color-hex--input"
          name="hex"
          type="text"
          placeholder="#54c73d"
          value={hexValue} // this is relevant for the event.target method in the setFN
          onChange={handleHexChange}
          defaultValue={hexValue}
        ></input>
        <input
          id="color-hex--input"
          //   name="hex"
          type="color"
          value={hexValue}
          onChange={handleHexChange}
        ></input>

See how valueis essential to the state management. This has to stay. Option 1 discarded. --> On to Option 2.

[StephMode]

Option 2: I go with 'defaultValue'. Upside: it would not affect the the color picker input. Downside: could impair UX, thus I should briefly check similiar Apps to see of this is standard

Removing the placeholder solved the issue ✅ Also note that the placeholderalready provides the default value:

 <input
          id="color-hex--input"
          name="hex"
          type="text"
          placeholder="#54c73d"
          value={hexValue}
          onChange={handleHexChange}
          // defaultValue={hexValue}
        ></input>