import React, { useState } from 'react'; import { TwitterPicker } from 'react-color'; import { connect } from 'react-redux'; import { colorUpload } from '../state/actionCreators'; const ColorPicker = (props) => { const [color, setColor] = useState(''); return ( <div className='colorPicker' data-testid='colorpickerbox'> <h3 className='selectBrandColor'>Select your brand color!</h3> <TwitterPicker data-testid='colorpicker' color={color} onChangeComplete={(color) => { setColor(color.hex); props.colorUpload(color.hex); props.setUserInfo({ ...props.userInfo, color: color.hex }); }} /> <div data-testid='colorpickerwrapper' style={{ backgroundColor: color, height: '50px', width: '100%', transition: 'ease all 500ms', }}></div> </div> ); }; const mapStateToProps = (state) => { return { color: state.color, }; }; export default connect(mapStateToProps, { colorUpload })(ColorPicker);