CODEWITHSUNDEEP
javascriptreactjs
user6329530
user6329530

Reputation: 734

React input color picker

I don't understand, how the input color type works.

I am trying to have a color picker and put the value into a state variable "color".

const [color, setColor] = useState(false);
const colorPicker = () => {
    console.log("colorPicker", color.target);
    return(
        <input type="color" value={color} onChange={setColor}/>
    );
}

But this gives me just a flood of javascript objects in the console and when I try to look into for instance color.target it throws an error:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https:// fb dot me/react-event-pooling for more information.

Upvotes: 11

Views: 23049

Answers (1)

TimoStaudinger
TimoStaudinger

Reputation: 42460

The onChange event handler receives an event object as parameter.

This event object contains the selected color as event.target.value, just like a regular text input would.

With this in mind, the following will allow you to hold on to the selected color:

const ColorPicker = () => {
  const [color, setColor] = useState(null);

  console.log("colorPicker", color);

  return (
    <input type="color" value={color} onChange={e => setColor(e.target.value)} />
  );
}

Regarding the error you see when you try to access event.target, the error message already does a good job explaining it. I suggest you take a look at the documentation page it refers to, that should help you understand the problem.

Upvotes: 23

Related Questions