React render a select field multiple times

Question

I have 5 labels that I need to render and each of them should have a select field with these options: string, fixed, guid, disabled

I implemented the following code

class renderCampaignCodes extends Component {
    state = {
        defaultCampaigns: [
            { name: 'Campaign Source: utm_source' },
            { name: 'Campaign Medium: utm_medium' },
            { name: 'Campaign Name: utm_campaign' },
            { name: 'Campaign Term: utm_term' },
            { name: 'Campaign Content: utm_content' }
        ],
        defaultTypes: ['string', 'fixed', 'guid', 'disabled']
    }

    render() {
        const { defaultCampaigns } = this.state
        return (
            <Flexbox flexDirection='column' marginTop='20px' width='600px'>
                {
                    defaultCampaigns.map((campaign, idx) => {
                        return (
                            <div key={idx}>
                                <Flexbox justifyContent='space-between'>
                                    <Flexbox marginTop='40px'>
                                        <label>{campaign.name}</label>
                                    </Flexbox>
                                    <Flexbox>
                                        <Field
                                            name='type'
                                            component={renderSelectField}
                                            label='Type'
                                            children={this.state.defaultTypes.map((item, i) => <MenuItem 
                                                key={i}
                                                value={item}
                                                label={item.replace(/^\w/, l => l.toUpperCase())}
                                                primaryText={item.replace(/^\w/, l => l.toUpperCase())}/>)
                                            }
                                        />
                                    </Flexbox>
                                </Flexbox>
                            </div>
                        )
                    })
                }
            </Flexbox>
        )
    }
}

But the selected value from any of the select fields will show up everywhere:

How can I prevent this from happening?

Answer 1

It looks like the name attribute for each of your selects is being set to the same, causing them all to take the same value from store/state (depending on your implementation).

You will want to namespace the type with something. For example:

<Field
    name={`${idx}.type`}
    component={renderSelectField}
    label='Type'
    children={this.state.defaultTypes.map((item, i) => (
        <MenuItem 
            key={i}
            value={item}
            label={item.replace(/^\w/, l => l.toUpperCase())}
            primaryText={item.replace(/^\w/, l => l.toUpperCase())}
        />
    ))}
/>