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.

what is the initial value of this.state.campaign?

Yousaf
– Yousaf

2020-05-21 15:29:26 +00:00
Commented May 21, 2020 at 15:29 — Yousaf
– Yousaf, Commented May 21, 2020 at 15:29
I haven't set the initial value it's just empty string " ".

user12551649
– user12551649

2020-05-21 16:39:28 +00:00
Commented May 21, 2020 at 16:39 — user12551649
– user12551649, Commented May 21, 2020 at 16:39
that is why event.target.value returns an empty string.

Yousaf
– Yousaf

2020-05-21 17:01:20 +00:00
Commented May 21, 2020 at 17:01 — Yousaf
– Yousaf, Commented May 21, 2020 at 17:01
How should I make it correct.

user12551649
– user12551649

2020-05-21 17:33:10 +00:00
Commented May 21, 2020 at 17:33 — user12551649
– user12551649, Commented May 21, 2020 at 17:33

Khabir · Accepted Answer · 2020-05-21 22:49:05Z

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>
        );
    }
}

Collectives™ on Stack Overflow

How to make Dynamic radio button in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related