set state on selection
andycapcom opened this issue · 6 comments
Hi Guys, when i setState on selection it works properly but the check images don't show anymore. can someone assist me with this please?
onSelection={ (option) => this.setState(option)}
I'm facing the same issue. I'm using redux and every the action get dispatched it changes the store but the indicator is not shown, I even tried with the renderIndicator prop and doesn't work
is it working without redux?
I figured out a way to make this work, and is to put this attribute:
selectedOptions={getOptionLabels(values[field].options)}
in my case that's an array with the currently selected values in the redux store
@ctorresthrash can you make i pull request so the it has that attribute. Facing the same problem. Thanks
@taobad I don't think a pull request is needed, you just must put selectedOptions={arrayWithTheSelectedOptions}
as an attribute in the component, it doesn't matter if it's redux, react state, mobx, etc; just an array, and make sure the array values match with the options values you specify in your component. Either way, this is my code.
<MultipleChoice
options={getOptionLabels(question.options)}
disabled={fetching}
selectedOptions={getOptionLabels(values[field].options)}
maxSelectedOptions={question.options.length}
renderIndicator={(selectedOption)=>{
if(question.options && values[field].options){
let currentOption = question.options.find(option=>option.label===selectedOption)
let existingOption = values[field].options.find(option=>option.value===currentOption.value)
if(existingOption){
return checkedIcon
}else{
return uncheckedIcon
}
}else{
return uncheckedIcon
}
}}
onSelection={(selectedOption)=>{
let currentOption = question.options.find(option=>option.label===selectedOption)
let existingOption = values[field].options.find(option=>option.value===currentOption.value)
let nextOptions = [...values[field].options]
if(!existingOption){
nextOptions.push(currentOption)
}else{
nextOptions.splice(nextOptions.indexOf(existingOption), 1)
}
dispatch(change(formName, `${field}.options`, nextOptions))
}}
/>
@ctorresthrash oh, i understand the logic now. going to try it later today.. THANKS!!