[Solved] Using with Redux

Hello I am trying to use this library with Redux, but I have to click two times on the color in order to get it displayed (I try with CirclePicker), but the action is dispatched on the first click as expected.

How can I get the good color displayed on the first click ? And why does it work at the second one ?

I call it like

<CirclePicker style={{"margin":"0 auto"}} onChangeComplete={createCategoryColor} />

And the method called simply does createCategoryColor(color, event){ const { dispatch } = this.props; dispatch(selectColorCreate(color.hex)); }

Do you have any idea please ? This lib is really nice !

[casesandberg]

You also have to pass the active color down into the component:

<div className={styles.row} style={{width:'50%'}}>
  <label>{label}</label>
  <SliderPicker color={ FIELD_NAME_HEX_COLOR_VAR } onChange={ (color) => { props.change(fieldName, color.hex) } } /> 
  <Field name={fieldName} component="hidden" /> 
</div>

[pradeepgill007]

Hi @casesandberg the problem is still there as I have to click two times on the color in order to get it displayed.

`const colorSlider = ({ input, label, meta: { touched, error }, …custom }) => (<div style={{width:‘50%’}}> <BlockPicker {…input} {…custom}/>

</div> )`

<Field color={item.value} triangle="hide" colors={['#000', '#ff0000']} item={item} name={item.key} component={colorSlider}/>