score:1
the problem is you're passing non-readonly array to the oneof
validator. and the values of non-readonly array are inferred as string
type. the solution is pretty simple. just pass it readonly tuple:
...
type: proptypes.oneof(['dropdown', 'checkbox'] as const).isrequired,
...
updated answer to address the second error.
to match the type: data: array<plugindropdowndata> | array<string>
you have to define your proptypes as:
...
data: proptypes.oneoftype([
proptypes.arrayof(proptypes.shape({
label: proptypes.string.isrequired,
value: proptypes.string.isrequired,
}).isrequired),
proptypes.arrayof(proptypes.string.isrequired),
]).isrequired,
notice that if you want the array to pass the validation you have to declare it's elements as isrequired
. if you're not planning to make them isrequired
you have to add | null | undefined
to array's item type. for example those two definitions pass without error:
type pluginmanifestobject = {
...
data: array<plugindropdowndata | undefined | null> | array<string | undefined | null>
...
}
...
data: proptypes.oneoftype([
proptypes.arrayof(proptypes.shape({
label: proptypes.string.isrequired,
value: proptypes.string.isrequired,
})),
proptypes.arrayof(proptypes.string),
]).isrequired,
...
Source: stackoverflow.com
Related Query
- React Proptypes gives error while generating Proptypes for a component
- React Material-ui library Error Received `true` for a non-boolean attribute `active`. while using Stepper component
- The right React Component PropTypes for es6 (Weak) Maps, Sets
- React Testing Library gives console error for ReactDOM.render in React 18
- Symlinking react modules with npm link for local development gives error
- Generating PropTypes for React Components written in TypeScript
- Typescript error for data-* attributes on MaterialUI React component
- Best practices for generating N of a component in React (without data)
- Minified React error in react while navigation one component to anther
- Testing React component with Jest gives 'Cannot find module' error
- Async await gives syntax error when used in React component
- I got an error for using React.useRef inside a react function component
- Fetching a github repo in react gives a "Module "stream" has been externalized for browser compatibility and cannot be accessed in client code" error
- Making React yield error instead of warning for undefined props descriped as required in PropTypes
- Grpc error while installing Firebase for React
- React & Jest testing: nested component connected to Redux gives Invariant Violation error
- Router events cause an error while being used on the constructor Warning: Can't perform a React state update on an unmounted component
- How to set a loading state for react component while sorting and filtering data?
- TypeScript gives 'Object is possibly undefined' error after importing object in React component
- React component throwing TypeScript error for function passed in as prop
- Jasmine test for React gives error and doesn't run tests
- React Proptypes union type Breakpoint gives error
- Javascript Parser Error While Trying To Include SVG Element as Functional React Component
- Propagate function error from parent component to child component in React while making API request
- I am getting error while installing material ui in cmd for react .I am using this command npm i @material-ui/icons and getting following errors ::
- Jest function call for functional component gives error on stimulate click
- Proptypes validation for a react component constructor function
- why browserify build gives error for react build?
- Problem with testing for error in React component using react-query and axios. Test with React Testing Library, Jest, msw
- Spread syntax gives error when copying react component properties
More Query from same tag
- Export React.JS variable and use in other file
- Jest mocked spy function, not being called in test
- IndexRoute not showing when pushing to GH Pages
- How to use SetState or function with firebase
- Passing a function as a callback to a React state created with hooks did not reflect new value of variable
- Any ideas on how to DRY code this navbar in React?
- Populate a state variable after an async fetch and the setting of another state variable
- Webpack dev server: How to redirect a localhost port to a URL of a different port
- How do I stub Ant Design's Form getFieldDecorator()?
- React draggable list component (with Hooks) keeps re-rendering, causing it to break. Why?
- Yup one of fields filled
- React-Redux API Get request action does not execute?
- How to create reaction in a mobx store
- Adding Object to nested array in react-redux
- React js communication between two components
- create react app: setupProxy keeps returning 401 blocked by CORS policy, not working for remote urls?
- componentWillRecieveProps current props
- Multiple Filtering in React table without libraries (React-table) with react-hooks
- React Redux Unit Test case
- why react router dom throwing hooks Invalid hook call error?
- React: this.setState() working in some functions, not in others within the same component
- React label picker component
- React/TS/material-ui Using variable as value of grid property throws errors: "No overload matches" and "Type 'number' is not assignable to type..."
- I am replacing a class component of react-tag to funcinate component
- Howto: Owner rendered in ownee react
- React - Display message while binding data
- Passing props to material-ui button wrapped by styled-components with Typescript
- How to set different states based on checked/unchecked inputs with pre-loaded data
- Javascript/ReactJS execution of .then() is being performed too early
- Combine two different but pretty similar functions on onChange event