How To Implement Radio Button In React?

import React, { useState } from "react";

function App() {
    const [
        selectedValue,
        setSelectedValue,
    ] = useState("option1");

    const handleRadioChange = (
        value
    ) => {
        setSelectedValue(value);
    };

    const styles = {
        container: {
            display: "flex",
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
        },
        heading: {
            color: "green",
            textAlign: "center",
        },
        radioGroup: {
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent:
                "space-around",
            marginTop: "20px",
            borderRadius: "8px",
            backgroundColor: "white",
            padding: "30px",
            boxShadow:
                "0px 2px 3.84px rgba(0, 0, 0, 0.25)",
        },
        radioButton: {
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
        },
        radioLabel: {
            marginLeft: "8px",
            fontSize: "17px",
            color: "#333",
        },
    };

    return (
        <div>
            <h1 style={styles.heading}>
                Geeksforgeeks
            </h1>
            <div
                style={styles.container}
            >
                <div
                    style={
                        styles.radioGroup
                    }
                >
                    <div
                        style={
                            styles.radioButton
                        }
                    >
                        <input
                            type="radio"
                            id="option1"
                            value="option1"
                            checked={
                                selectedValue ===
                                "option1"
                            }
                            onChange={() =>
                                handleRadioChange(
                                    "option1"
                                )
                            }
                        />
                        <label
                            htmlFor="option1"
                            style={
                                styles.radioLabel
                            }
                        >
                            ReactJS
                        </label>
                    </div>

                    <div
                        style={
                            styles.radioButton
                        }
                    >
                        <input
                            type="radio"
                            id="option2"
                            value="option2"
                            checked={
                                selectedValue ===
                                "option2"
                            }
                            onChange={() =>
                                handleRadioChange(
                                    "option2"
                                )
                            }
                        />
                        <label
                            htmlFor="option2"
                            style={
                                styles.radioLabel
                            }
                        >
                            NextJs
                        </label>
                    </div>

                    <div
                        style={
                            styles.radioButton
                        }
                    >
                        <input
                            type="radio"
                            id="option3"
                            value="option3"
                            checked={
                                selectedValue ===
                                "option3"
                            }
                            onChange={() =>
                                handleRadioChange(
                                    "option3"
                                )
                            }
                        />
                        <label
                            htmlFor="option3"
                            style={
                                styles.radioLabel
                            }
                        >
                            React Native
                        </label>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

import React, { useState } from "react";

const styles = {
    container: {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
    },
    heading: {
        color: "green",
        textAlign: "center",
    },
    radioButton: {
        padding: "12px 16px",
        borderRadius: "8px",
        margin: "8px",
        border: "2px solid #007BFF",
        background: "#fff",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: "280px",
        cursor: "pointer",
        transition:
            "background-color 0.3s, color 0.3s",
    },
    selected: {
        background: "#007BFF",
        color: "#fff",
        borderColor: "#007BFF",
    },
    list: {
        listStyleType: "none",
        padding: 0,
        textAlign: "center",
    },
};

const CustomRadioButton = ({
    label,
    selected,
    onSelect,
}) => (
    <li>
        <button
            style={{
                ...styles.radioButton,
                ...(selected
                    ? styles.selected
                    : {}),
            }}
            onClick={onSelect}
        >
            {label}
        </button>
    </li>
);

function App() {
    const [
        selectedValue,
        setSelectedValue,
    ] = useState(null);

    return (
        <div>
            <h1 style={styles.heading}>
                Geeksforgeeks
            </h1>

            <div
                style={styles.container}
            >
                <ul style={styles.list}>
                    <CustomRadioButton
                        label="ReactJS"
                        selected={
                            selectedValue ===
                            "option1"
                        }
                        onSelect={() =>
                            setSelectedValue(
                                "option1"
                            )
                        }
                    />
                    <CustomRadioButton
                        label="NextJs"
                        selected={
                            selectedValue ===
                            "option2"
                        }
                        onSelect={() =>
                            setSelectedValue(
                                "option2"
                            )
                        }
                    />
                    <CustomRadioButton
                        label="React Native"
                        selected={
                            selectedValue ===
                            "option3"
                        }
                        onSelect={() =>
                            setSelectedValue(
                                "option3"
                            )
                        }
                    />
                </ul>
            </div>
        </div>
    );
}

export default App;