0

I have this simple code in a map function to build a radiobutton:

<DataTable>
{props.options.map((o,i) =>{
   return(
   <>
   <DataTable.Row>
      <DataTable.Cell style={{flex:7}}>{o.name}</DataTable.Cell>
      <DataTable.Cell style={{flex:1}}>
         <RadioButton
            value={i}
            status={ o.sel ? 'checked' : 'unchecked' }
            onPress={() =>{updateRadio(i)}}
         />
      </DataTable.Cell>
   </DataTable.Row>
   </>
</DataTable>

with this function for update the radio:

const updateRadio = (index) => {
        var temp = props.options
        temp.map((o,i) =>{
            if (i === index)
                temp[i].sel = true
            else
                temp[i].sel = false
        })
        props.setOptions(old => [...temp])
}

props.options are this:

[{
    "id": "602b883a53c89933b8238339",
    "name": "Yes",
    "sel": false,
    "value": null
},
{
    "id": "602b883a53c89933b823833a",
    "name": "No",
    "sel": false,
    "value": null
}]

If I see the props.options it can be update correctly but the radio can't see correcly.

At first open I have this: enter image description here

If I click on YES (or No the first time) I have correctly this: enter image description here with props.options:

[{
    "id": "602b883a53c89933b8238339",
    "name": "Yes",
    "sel": true,
    "value": null
},
{
    "id": "602b883a53c89933b823833a",
    "name": "No",
    "sel": false,
    "value": null
}]

Next if I check No (or YES) I have this: enter image description here with props.options:

[{
    "id": "602b883a53c89933b8238339",
    "name": "Yes",
    "sel": false,
    "value": null
},
{
    "id": "602b883a53c89933b823833a",
    "name": "No",
    "sel": true,
    "value": null
}]

Why radio can't render correctly?

EDIT: I have found this behave: first open button (unchecked) has border-width:2px enter image description here

select and deselect (unchecked) the border-width is 20px enter image description here (instead of 2px enter image description here)

reselect (checked) the border-width is 20px enter image description here (instead of 2px enter image description here)

Francesco
  • 135
  • 2
  • 11
  • I'm sorry, can you elaborate what do you mean by "radio can't see correcly."? the UI seems to be correct – I am L Jul 07 '21 at 05:47
  • Hi, I expect a empty circle same as first image....when a radio has uncheck, it remains gray and not black (for this example) – Francesco Jul 07 '21 at 06:34
  • Simply use radiobuttongroup (https://callstack.github.io/react-native-paper/radio-button-group.html) if it's the behavior that you want. – Francesco Clementi Jul 07 '21 at 07:36
  • Hi @FrancescoClementi , I try but how I can checked dinamically the radio from array? In my case I have a map() function to view the element true and check it.... – Francesco Jul 07 '21 at 07:48
  • 1
    Something like this: setValue(newValue)} value={props.options.find(o=>o.sel === true)?.id}> {props.options.map((o,i) =>{ return( <> {o.name} >})} – Francesco Clementi Jul 07 '21 at 07:54
  • Anyway your problem could be a null value in the sel property – Francesco Clementi Jul 07 '21 at 07:56

0 Answers0