How do I capture Radio option value in ReactJS

Question

How do I capture the radio option value? When I click to invoke the onChange event, I get an error "Expected onChangelistener to be a function, instead got a value ofobject type." Thanks

here is the state code here:

const [sectionAData, setSectionAData] = useState({})

Here is the function code here:

  const handleSectionA = (e) => {  
            setSectionAData({ ...sectionAData, [e.target.name]: e.target.value })
    }

Here is the form:

 <tr>
        <td style={{ width: "2rem", textAlign: "center" }}>1</td>
        <td style={{padding:"5px"}}>Please rate this product A.</td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ1" onChange={sectionAData} value="5"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ1" onChange={sectionAData} value="4"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ1" onChange={sectionAData} value="3"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ1" onChange={sectionAData} value="2"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ1" onChange={sectionAData} value="1"/></td>
    </tr>
    <tr>
        <td style={{ width: "2rem", textAlign: "center" }}>2</td>
        <td>Please rate this product B.</td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ2" onChange={sectionAData} value="5"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ2" onChange={sectionAData} value="4"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ2" onChange={sectionAData} value="3"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ2" onChange={sectionAData} value="2"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ2" onChange={sectionAData} value="1"/></td>
    </tr>
    <tr>
        <td style={{ width: "2rem", textAlign: "center" }}>3</td>
        <td>Please rate this product C.</td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ3" onChange={sectionAData} value="5"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ3" onChange={sectionAData} value="4"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ3" onChange={sectionAData} value="3"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ3" onChange={sectionAData} value="2"/></td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ3" onChange={sectionAData} value="1"/></td>
    </tr>

1tai · Accepted Answer · 2022-02-27 15:10:39Z

2

Change the onChange={sectionAData} to a function, for example your handleSectionA function: onChange={handleSectionA}.

<td style={{ width: "2rem", textAlign: "center" }}>3</td>
<td>Please rate this product C.</td>
<td style={{textAlign: "center" }}><input type="radio" name="AQ3" onChange={handleSectionA} value="5"/></td>

edited Feb 27, 2022 at 15:10

answered Feb 27, 2022 at 14:46

1tai

3902 silver badges12 bronze badges

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

Comments

Quyen Nguyen · Accepted Answer · 2022-02-27 14:52:23Z

0

you can change in the following way, at onChange:

<tr>
        <td style={{ width: "2rem", textAlign: "center" }}>1</td>
        <td style={{padding:"5px"}}>Please rate this product A.</td>
        <td style={{textAlign: "center" }}><input type="radio" name="AQ1" onChange={handleSectionA} value="5"/></td>
        .....
</tr>

answered Feb 27, 2022 at 14:52

Quyen Nguyen

2772 silver badges9 bronze badges

Collectives™ on Stack Overflow

How do I capture Radio option value in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related