score:0
You need to set the checked
attribute on the <Radio>
element as a response to some state/props, the following is a snippet from a Formik / react-bootstrap form:
<Radio
name="upload_radio"
checked={status.upload_radio === 'textarea'}
value="textarea"
onChange={e => setStatus({ upload_radio: e.target.value })}
>
score:1
The onChange event is being fired, but your handleChange function is not doing what you are expecting.
handleChange(event){
const formState = Object.assign({}, this.state.form)
formState[event.target.name] = event.target.value
this.setState({form: formState})
}
If you take a look in a debugger, event.target does not have a name or value attribute for a check box. It simply has a checked attribute. You will have to find another way to get the information you are looking for out of the target.
score:1
To piggyback off the previous poster, in your Radio buttons you have value={this.state.form.adminRate}
but adminRate is never defined in
this.state = {
form: {
teacherRate: '',
overallRate: ''
}
So when you return formState[event.target.name] = event.target.value
from your handleChange function its not inputting any value into the event.target.name
. So you may just want to input 1, 2, and 3 as the value in the corresponding buttons.
Also even if it did input values, event.target.name
in your Radio buttons are adminRate so you'd run into the this.state problem again, so you'd have to convert name={adminRate}
to name={teacherRate}
in the first FormGroup buttons so that the formState object in
handleChange(event){
const formState = Object.assign({}, this.state.form)
formState[event.target.name] = event.target.value
this.setState({form: formState})
}
points to the teacherRate property inside the form object defined in this.state when you call this.setState({form: formState})
at the end of the function.
I don't know the relevance of using the 'Overall Rating' radio buttons so I can't assist with the second FormGroup but it would basically be the same logic as the first. You'd need Math
logic to get the average number for the overall rating though.
Source: stackoverflow.com
Related Query
- How to invoke onChange for radio button using react-bootstrap?
- How to implement a check all button for radio buttons, using React Hooks?
- How to dynamically create button for calling specific action using map array in react
- How do you toggle the checked value of a radio button in react using hooks?
- I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even
- how to get the checked value of a radio button using react
- how to maintain the state for each radio button in a table view - react
- How do I pass an object (created by a buttonClick event) from child to parent in react when already using props for a styled button
- how do you single select change the value when the radio button is checked, using react hooks?
- OnChange event using React JS for drop down
- How to implement radio button in React Native
- How can I test a change handler for a file-type input in React using Jest/Enzyme?
- How to write test case for ErrorBoundary in React using Jest / Enzyme
- How to update webpack config for a react project created using create-react-app?
- How to Add Smooth Scrolling Back To Top Button using react js?
- How to simulate mouse over event on a div using enzyme for testing a react application?
- How to set headers for a React app created using 'create-react-app'
- How can I find and click a button that has no text using React Testing Library?
- CDN links for React packages and how to import it when using react using the scripts from CDN
- How do I store the state of radio groups in React using react-hook-form
- How I can disable a button in React js for 5 seconds after click event
- Using Jquery and Bootstrap with Es6 Import for React App
- How to make React input onChange set state only after onChange stops firing for set time?
- How to wait for complete render of React component in Mocha using Enzyme?
- How to create unique key for NavigationStateUtils using push route in React Native/Redux?
- How can I define the type for a <video> reference in React using Typescript?
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- How to add floating action button on the right-bottom side of the screen using material ui in react
- How to center text in Facebook Login Button for React Native (Android)?
- How can I test css properties for a React component using react-testing-library?
More Query from same tag
- why useEffect is called twice when using useCallbackRef from use-callback-ref
- React.js way to emulate handlebars condition statements
- Unexpected error when querying for a field from Firebase
- React router v4 redirect when no match
- Problem hosting react app at sub route of website - multiple websites one IP address NGINX
- Firestore composite query pagination
- Maintain user session in same browser in react
- Disable button after click in React
- Conditional Buttons True and False React
- Include Kendo React with Script Tag
- While trying to pass image from res.data.photo to useContext I am getting Cannot read property 'data' of undefined
- How can I style active Link in react-router v4?
- Fontawesome 5 SVG icons not staying inline with other elements like other icons
- i18n Localization in React with Material UI by extending Typography?
- Element type is invalid: expected a string (for built-in components) ...... Check the render method of `App`
- What takes place where in reactjs build system?
- How to create a page in Gatsby from JSON file?
- How to use replace() in a useState string?
- Flexbox margins between elements and zero margins to parent wrapper
- Typescript map array of objects giving error: property '(property)' does not exist on type object
- React svg from public folder
- How can I send a React app from a Koa.js server?
- Material UI - Expansion panel with checkbox
- Styling nested rows conditionally in Handsontable
- Component not show up in nested router with AuthProvider ,React and Firebase
- React state is not changing properly with useState and select
- Paint node panels on gojs
- Link to not working in react
- Using custom classes when styling a theme in MuiTheme
- How to align div horizontally in React JS?