score:2
Accepted answer
radio buttons are grouped by name attribute of input tags. in your code, you wrote name="true" or name="false" for input tags. those are wrong. so all of input tags who has name="true" are in one group and same as for the name="false".
please try the below code.
import react from 'react';
const notificationform = ({ text, slug, isnotification, handleupdate }) => {
return (
<>
<h1>{text}</h1>
<div htmlfor={1}>
<label>
<input
id={1}
type="radio"
name={slug} // it must be uniqe for groups and same in one group
value="true"
checked={isnotification === true}
onchange={(e) =>
dispatch({
type: 'fetch_is_notification_fulfilled',
payload: e.currenttarget.value,
slug,
})
}
/>
notify me
</label>
<label htmlfor={2}>
<input
id={2}
type="radio"
name={slug} // it must be uniqe for groups and same in one group
value="false"
checked={isnotification === false}
onchange={(e) =>
dispatch({
type: 'fetch_is_notification_fulfilled',
payload: e.currenttarget.value,
slug,
})
}
/>
do not notify me.
</label>
</div>
</>
);
};
export default notificationform;
Source: stackoverflow.com
Related Query
- Dynamic radio buttons are not checked if different object have a same value
- how to get key and value of object whose values are not equal to null?
- Same function called in different buttons and both are giving different output in Reactjs, javascript?
- React controlled radio buttons not being checked
- Why is it not possible to have the same name of two StaticQuery elements on two different layouts for Gatsby?
- Display data in a React component from an object where the keys are different but the values are the same
- Assign same value to different keys in object literal reactjs
- In my react shouldComponentUpdate function,this.props and nextprops have all the same attributes, but they are not equal
- componentWillReceiveProps not being called if 2 different prop changes have the same values
- ReactJS. All parts of the hook have different value of the same state
- Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers. i am facing this issue
- filter object and get all items that have the same value javascript
- Radio Buttons in React using Bootstrap always post same value
- Radio buttons in a Semantic UI React table retain checked attribute after selecting another radio button in the same row?
- Mark as true if one of the two radio buttons are checked
- Why are my radio buttons not toggling state in react?
- define object type with dynamic number of key and value and also that values can have string or number value
- Change variable value if all value inside an object are same and false or true
- Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers
- How to validate if first array doesn't have value from second array by radio buttons with YUP
- React-Bootstrap Table with dynamic Content - Form over Radio Buttons in Rows not working
- Redux-toolkit: Store does not have a valid reducer . Make sure the argument passed to combineReducers is an object whose values are reducers
- Objects are not valid as a React child - Unable to display value from object in React
- Can a react/javascript object child have a value and children at the same time?
- Check if two array are equal and disable a button of array that have same value
- Radio button not checked despite value being set in React
- MaterialUI Radio buttons with Formik - value not set onSubmit
- Comparing the 2 arrays and if the id's are matching we need to enable the radio buttons if not disable
- How to make default checked for radio buttons in react?
- React native - objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})
More Query from same tag
- Inject variables directly to a function passed on from React-Apollo <Mutation /> component and not as props
- How can I fix tooltip with overflow-x and overflow-y?
- React : Appsync subscription doesn't work in useEffect
- How to partially mock a custom react hook with Jest?
- Is there a way to change the react-chart-js tooltip only on a graph?
- Style props in component in React
- Exporting functions with reactjs and babel
- TypeError: setEmail is not a function
- React - how to apply local storage for hook value
- React infinite loop returned by array even with dependency added
- Electron make transparent circle in window?
- spring cors blocked on get
- How to change the `frontend_domain` port in `GRAPHQL_AUTH` in the verification mail?
- Invalid Hook Call Error when using react useState hook inside firebase app
- Apply style to ButtonBase in a Tab component
- How to handle navigation using reactjs and redux
- Update ApolloClient headers after it was initialised
- Is there a way to add children components to functional stateless components that are called as functions?
- increase and decrease value in input with react
- Puppeteer Page.Screencast click on page
- How should I use transformOrigin in Material UI in Menu component
- How can I enable specification extensions in asyncapi-react-component?
- React - How to prevent re-rendering of all the input fields when input changes
- Borderless table react-bootstrap-table
- react-draggable save position of mapped objects in React Functional Component
- How to get label text instead of the value of the antd slider
- Dynamic pages at load time, not build time
- How to display the saved content of CKEditor5 in React Js
- Trying to work with React v0.14.3 in the browser
- React - map using multiple arrays