RadioForm doesn't display without radio_props Prop

[joshuamyers-dev]

    <RadioForm formHorizontal={true} animation={true}>
                                    {/* To create radio buttons, loop through your array of options */}
                                    {this.state.radioProps.map((obj, i) => {
                                        <RadioButton labelHorizontal={true} key={i} >
                                            {/*  You can set RadioButtonLabel before RadioButtonInput */}
                                            <RadioButtonInput
                                                obj={obj}
                                                index={i}
                                                isSelected={this.state.value3Index === i}
                                                onPress={() => {console.log('hi')}}
                                                borderWidth={1}
                                                buttonInnerColor={'#e74c3c'}
                                                buttonOuterColor={this.state.value3Index === i ? '#2196f3' : '#000'}
                                                buttonSize={40}
                                                buttonOuterSize={80}
                                                buttonStyle={{}}
                                                buttonWrapStyle={{marginLeft: 10}}
                                            />
                                            <RadioButtonLabel
                                                obj={obj}
                                                index={i}
                                                labelHorizontal={true}
                                                onPress={() => {console.log('hi')}}
                                                labelStyle={{fontSize: 20, color: '#f7f7ff'}}
                                                labelWrapStyle={{}}
                                            />
                                        </RadioButton>
                                    })}

                                </RadioForm>

this.state = {
          value3Index: 0,
          radioProps: [
              {label: 'Girl', value: 0},
              {label: 'Guy', value: 1}
          ]
      };

[arnoldbird]

I can confirm the "pro" example in the README does not work, because radio_props isn't set in RadioForm. The example should start...

<RadioForm
     radio_props={radio_props}
 >
   {/* To create radio buttons, loop through your array of options */}

[diythoso]

Pro example doesn't work for me as well

[LudovicBtrs]

Hi, please try to add a return before the RadioButton component. Cheers.

[thisiswhale]

To clarify @LudovicBtrs is saying, make sure to return the component when mapping:

{this.state.radioProps.map((obj, i) => {
return (<RadioButton labelHorizontal={true} key={i} >
              <RadioButtonInput
                   ...
                />
               <RadioButtonLabel
                    ...
                />
                </RadioButton>
               })}
       );

[Jonathan0wh]

Could this be updated in the doc? I have spent hours on the Pro example in the doc until I found the solution above.

[Jonathan0wh]

And it may be better to change this.state.value3Index in Pro to this.state.value