How to use divs as radio button options in React.js

Here's the stackblitz example. The idea is to add an active class on the selected radio div.

constructor() {
    this.state = {
        activeIndex: ''
    };

    this.radioButtons = [
        {
            text: 'India'
        },
        {
            text: 'England'
        }
    ]
}

updateRadioGroup(i) {
    this.setState({ activeIndex: i })
}

render() {
    let { activeIndex } = this.state;
    return (
        <React.Fragment>
            <h4> Who will win the match </h4>
            {
                this.radioButtons.map((element, i) => (
                    <div key={i} className={activeIndex === i ? 'radio_div active' : 'radio_div'} onClick={() => this.updateRadioGroup(i)}>
                        {element.text}
                    </div>
                ))
            }
        </React.Fragment>
    );
}

In my example i have added radio options meta in a state. Rendered the html with initial radio activeIndex ' ' empty (so that no radio is selected by default). Now whenever the user clicks on any of the div i update the activeIndex with the clicked radioDiv index and attach the active class on the respective radioDiv conditionally.

Thanks let me know if this is the case you wanted to achieve.