Not able to set defaultChecked value in Radio button react js

Question

I am not able to set the defaultChecked value in Radio button ReactJS.

default value is depends on API fetched data.

Below is my useState:

const [edit_data, setEditData] = useState([]);

API Call

useEffect(() => {
        (async () => {
            let url = window.location.href
            var array_fragment = url.toString().split("/")
            var content_id = array_fragment[array_fragment.length - 1]
            const result = await axios(`${process.env.REACT_APP_API_URL}/edit_content/${content_id}`);
            setEditData(result.data);
        })();
    }, []);

I have tried this set last value(Other) radio button but actual want to set Lecture radio button. edit_data.content_type return the "Lecture" value.

defaultChecked={edit_data.content_type === 'Value' ? "true" : "false"}

React radio button code:

<fieldset>
    <Form.Label>Content Type</Form.Label>
    <Row className="d-flex flex-wrap flex-md-nowrap align-items-center py-4" value={contenttype} onChange={(e) => setContentType(e.target.value)}>
        <Col className="d-block mb-4 mb-md-0">
            <Form.Check
                defaultChecked={edit_data.content_type === 'Lecture' ? "true" : "false"}
                type="radio"
                defaultValue="option1"
                label="Lecture"
                name="x"
                value="Lecture"
                id="radio1"
                htmlFor="radio1"
            />
        </Col>
        <Col className="d-block mb-4 mb-md-0">
            <Form.Check
                defaultChecked={edit_data.content_type === 'Seminar' ? "true" : "false"}
                type="radio"
                defaultValue="option2"
                label="Seminar"
                name="x"
                value="Seminar"
                id="radio2"
                htmlFor="radio2"
            />
        </Col>
        <Col className="d-block mb-4 mb-md-0">
            <Form.Check
                defaultChecked={edit_data.content_type === 'Study Material' ? "true" : "false"}
                type="radio"
                defaultValue="option3"
                label="Study Material"
                name="x"
                value="Study Material"
                id="radio3"
                htmlFor="radio3"
            />
        </Col>
        <Col className="d-block mb-4 mb-md-0">
            <Form.Check
                defaultChecked={edit_data.content_type === 'Other' ? "true" : "false"}
                type="radio"
                defaultValue="option4"
                label="Other"
                name="x"
                value="Other"
                id="radio4"
                htmlFor="radio4"
            />
        </Col>
    </Row>
</fieldset>

What is the response from await axios(`${process.env.REACT_APP_API_URL}/edit_content/${content_id}`);? — Hanchen Jiang
– Hanchen Jiang, Commented Dec 27, 2021 at 6:25
@HanchenJiang json response is { added_on: null, category: [1], content_file: "/media/media/download_QpgAjoK.jpg", content_type: "Lecture", description: "nil", expiration: "2021-12-09", id: 3, publish_now: true, schedule_release: "2021-12-23", school_profile: 4, show: 1, shows_name: "nil", sponsor_link: "nil", status: false, subtitle: "niln", tag: (2) [1, 2], title: "nil", topic: [1], user: 7 } — Karan Chaudhari
– Karan Chaudhari, Commented Dec 27, 2021 at 6:29
You've initialised edit_data as an array so it won't have a content_type property on the initial render. — Andy
– Andy, Commented Dec 27, 2021 at 6:29

Khalil · Accepted Answer · 2021-12-27 07:11:45Z

1

You have replace "true" with true and "false" with false. Strings are treated as true. Empty strings are treated as false.

defaultChecked={edit_data.content_type === 'Value' ? true : false}

You have to add the checked attribute to the radio as mentioned below and also change the state on onClick event if you want the radio button to toggle.

<Form.Check
defaultChecked={edit_data.content_type === 'Study Material' ? true : false}
checked={edit_data.content_type === 'Study Material' ? true : false}
type="radio"
defaultValue="option3"
label="Study Material"
name="x"
value="Study Material"
id="radio3"
htmlFor="radio3"
/>

Check the codesandbox which demonstrates the solution.

edited Dec 27, 2021 at 7:11

answered Dec 27, 2021 at 6:33

Khalil

1,5259 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Karan Chaudhari Over a year ago

tried but not working

Khalil Over a year ago

Are there any errors in the console?

Karan Chaudhari Over a year ago

No not showing any errors related to defaultChecked

Khalil Over a year ago

Check the edited response please

Karan Chaudhari Over a year ago

I have changed defaultChecked={edit_data.content_type === 'Study Material' ? true : false} checked={edit_data.content_type === 'Study Material' ? true : false} in code its set the defaultChecked redio button but after that i am not able change redio button

|

Collectives™ on Stack Overflow

Not able to set defaultChecked value in Radio button react js

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related