How to make Dynamic radio button in React?

Question

I want to create a Dynamic Radio button based on API response and store the value clicked in the state.

Here is the code for radio button:

     <section className='radio-content-brand'>
          <span className='company-type-brand'>Campaign Type</span>
                {campaign_type.map(type => (
                    <div className='div-brand'>
                        <div className="size-box-brand">
                            <input
                                type="radio"
                                value={this.state.campaign}
                                checked={this.state.campaign === type.campaign_type}
                                onChange={this.handleChangeCompanyType}
                            />
                            <label className='label-brand'>
                                <span style={{ color: "#606060", fontSize: 25 }}>{type.campaign_type}</span>
                            </label>
                        </div>
                    </div>
                ))}
     </section>

onChange function is here:

handleChangeCompanyType(event) {
        console.log(event.target.value);
        this.setState({ campaign: event.target.value })
    }

Here are 2 states campaign where I want the clicked radio button value to be stored and campaign_type where the list of responses is stored.

The issue is when clicked on the radio button there is no response i.e event.target.value is empty.

Answer 1

Please check this example. Hope it helps you.

import React from "react";

export default class DynamicRadio extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            campaign: 'standard',
            checked: 1
        };
        this.campaign_types = [
            {id: 1, campaign_type: 'normal'},
            {id: 2, campaign_type: 'standard'},
            {id: 3, campaign_type: 'automated'},
        ];
    }

    handleChangeCompanyType = (event, index) => {
        console.log(this.campaign_types[index].campaign_type, 'campaign_type');
        let value = this.campaign_types[index].campaign_type;
        this.setState({campaign: value, checked: index})
    };

    render() {
        return (
            <div>
                <section className='radio-content-brand'>
                    <span className='company-type-brand'>Campaign Type</span>
                    {this.campaign_types.map((type, i) => (
                        <div className='div-brand'>
                            <div className="size-box-brand">
                                <input
                                    key={type.id}
                                    type="radio"
                                    value={this.state.campaign}
                                    checked={this.state.checked === i}
                                    onClick={(event) => this.handleChangeCompanyType(event, i)}
                                />
                                <label className='label-brand'>
                                    <span style={{color: "#606060", fontSize: 25}}>{type.campaign_type}</span>
                                </label>
                            </div>
                        </div>
                    ))}
                </section>
            </div>
        );
    }
}