How do I capture Radio option value in ReactJS-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>