The prop `checked` is marked as required in `ToggleSwitch`, but its value is `undefined`

Rebin Joseph

In my reactjs project, when I onchange the toggleswitch, I am getting the error as

Warning: Failed prop type: The prop `checked` is marked as required in `ToggleSwitch`, but its value is `undefined`.

I have an array which contains some values in which I need to map and to show the toggleswitch. my code is:

let [ischecked, setChecked] = useState({
        checkedA: true,
}); 
const handleSwitchChange = (event, func) => {
  setChecked(event);
};  
Object.keys(arr).map((key, val) => (
<ToggleSwitch
className='onFunc'
defaultChecked={ischecked.checkedA}
onChange={(e)=>handleSwitchChange(e,key)}
name={`fun[${key}]`}
id={`on_${key}`}
optionLabels={["On", "Off"]}
value={ischecked.checkedA === true ? 'y' : 'n'}
/>
))
</td>

console error

Pleas help. I don't know how to fix the issue.

I need to remove the console eror when i click on the toggleswitch.

Ahmed Sbai

This is happening because in your ToggleSwitch component you have this :

ToggleSwitch.propTypes = {
//...
  checked: PropTypes.boolean.isRequired
};

This means that your ToggleSwitch should recieve a property named checked.
so you have to pass it to the component :

<ToggleSwitch
//...
checked={value} 
/>

if you don't really need it to be required you can remove isRequired :

ToggleSwitch.propTypes = {
//...
  checked: PropTypes.boolean
};

so it will be optional

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router

Failed prop type: The prop todos[0].id is marked as required in TodoList, but its value is undefined

Warning: Failed prop type: The prop `store` is marked as required in `Provider`, but its value is `undefined`. in Provider

Failed prop type: The prop `userSignUpRequest` is marked as required in `Login`, but its value is `undefined`

Prop is marked as required in component, but its value is `undefined`

React-native, maps,The prop 'region.latitude' is marked as required in 'MapView' but it's value is null

The prop `children` is marked as required in `Button`, but its value is `undefined`

React-redux error "The prop `store` is marked as required in `Root`, but its value is `undefined"

reactjs Delete Operation Warning: Failed prop type: The prop `role` is marked as required in `ManageRolePage`, but its value is `null`

Warning: Failed prop type: The prop `todos[0].title` is marked as required in `TodoList`, but its value is `undefined`

The prop `store.subscribe` is marked as required

Failed prop type The prop is marked as required but its value is `undefined`

Warning: Failed prop type: The prop open is marked as required in Snackbar, but its value is undefined

The context `router` is marked as required in `Redirect`, but its value is `undefined`

Failed prop type: The prop `children` is marked as required in `e`, but its value is `null`

The prop `classes` is marked as required in `FullWidthGrid`, but its value is `undefined`

React - prop-types is marked as required

Failed prop type: The prop `children` is marked as required in `Mutation`, but its value is `undefined`

Failed prop type: The prop `children` is marked as required in `InputAdornment`, but its value is `undefined`

Failed prop type: The prop `children` is marked as required in` Sidebar`, but its value is `undefined`

Failed prop type: The prop `options` is marked as required in `signupCheckBoxes`, but its value is `undefined`

Failed prop type: The prop `auth` is marked as required in `Navbar`, but its value is `undefined`

React-Native this prop randomNumberCount is marked as required in Game ,but its value undefined

React - Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

React Native: Failed prop type: the prop businessPhoneNumberChanged is marked as required

Warning: Failed prop type: The prop `alt` is marked as required in `MainImage`, but its value is `undefined`. MainImage

How to fix this issue “Warning: Failed prop type: The prop `title` is marked as required in `Tab`, but its value is `undefined`.”

Warning: Failed prop type: The prop `createCourse` is marked as required in `CoursesPage`, but its value is `undefined`

onChange prop value undefined