Id required somewhere

[RomainGoncalves]

Hello,

I'm using the component on a table in order to filter the table according to the radio that is selected. So far so good. That works no worries.

Now, when I render 3 of these tables in different tabs, then the radio that is selected is only for the radio in the last tab and then doesn't change.

I believe this happens because the values are the same in all 3 tabs (namely: 0, 1, 2) and therefore the component doesn't know which to select.

Would it be possible to have an identifier for the specific RadioGroup (or is there one that I missed?) so that we can use it to select specific radios. Or all for that matter.

thanks

[danielberndt]

It shouldn't be possible for a RadioGroup to be influenced by Radios of another RadioGroup since they are only coupled via there parent/child relationship.
Is there a minimal reproduction that showcases the effect you're describing?

[anwarhamr]

I'm also seeing this behavior. I have a component that is used in two different tabs. The radio group has a unique key for each usage. When I change one tabs value, the value for the clicked adio group does not have any value selected; everything in my app updates correctly. Then when I switch to the other tab that also has the component it's selected value is the one selected from the prior page.
I tried to do a fiddle but not experienced enough to include your library... I'll keep trying. For now, this is what my component is

import React from 'react';
import {RadioGroup, Radio} from 'react-radio-group'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {changeWindowSize} from '../actions/actionCreators'

const WindowSizeSlider = React.createClass({

    handleChange(value) {
        document.activeElement.blur();
        this.props.changeWindowSize(value);
    },
    render() {
        console.log('WindowSizeSlider',this.props.id,this.props.viewMmPerSecond);
        return (
            <div className="chartAdjustmentOptions" >
                <div className="chartAdjustmentOptionsLabel">
                    Adjust Window Size (mm/s): <i>Displaying {this.props.windowSizeInSeconds} s</i></div>
                <RadioGroup key={this.props.id+'WindowSizeSlider'}
                name="windowSize" selectedValue={this.props.viewMmPerSecond} onChange={this.handleChange}>
                    <label><Radio value="7.5"/>7.5</label>
                    <label><Radio value="10"/>10</label>
                    <label><Radio value="30"/>30</label>
                    <label><Radio value="60"/>60</label>
                </RadioGroup>
            </div>
        )
    }
});

const mapStateToProps = (state) => {
    return {
      viewMmPerSecond: ''+state.settings.viewMmPerSecond,
      windowSizeInSeconds:state.settings.windowSizeInSeconds
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({
        changeWindowSize
    }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(WindowSizeSlider);

and my calling component

<WindowSizeSlider id="example" windowSizeInSeconds={windowSizeInSeconds}/>

and the second calling component

<WindowSizeSlider id="CurrentEpoch" windowSizeInSeconds={windowSizeInSeconds}/>

[anwarhamr]

OK I solved the problem in my situation. Give it a try. I just make the RadioGroup name property unique.
What I did is this:

 <RadioGroup name={this.props.id+'WindowSizeSlider'} ...>

Where this.props.id is passed from the parent (in my case I just used the parents component name) and will be unique across all RadioGroup usages.
I think a key property should be added...

[sharifme04]

I have same problem, I have multiple group but some group have similar option values. when I click one group value, i see same value from other group selected automatically. I am not so expert still now. here is my mapping code

   questions = this.state.details.questions.map(question =>
     <div key={question.id}>
     <h5>{question.title}</h5>
     <RadioGroup  name={question.id} selectedValue={this.state.selectedValue} onChange={this.handleChange}>
      { question.options.map((option, value)=>
        <label key={value}><Radio value={option} />{option}</label>
      )
    }
    </RadioGroup>
</div>

   )