d-a-n/react-native-multiple-choice

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!!