score:0
createportal
receive a single react node, so you will need to wrap it inside another <></>
(react.fragment):
this is createportal
type:
export function createportal(
children: reactnode,
container: element,
key?: null | string
): reactportal;
so you would need to change your code to:
<portal>
<>
<overlay />
<modal
padding={padding}
width={width}
height={height}
radius={radius}
overflowy={overflowy}
>
{children}
</modal>
</>
</portal>;
and in your portal.tsx
export const portal: react.functioncomponent<react.reactnode> = ({
children
}) => {
const el = document.getelementbyid("portal");
if (el) return reactdom.createportal(children, el);
return null;
};
working example:
Source: stackoverflow.com
Related Query
- Error occurs when react Modal is surrounded by Portal
- Error when rendering React Portal with Storyshots
- react Portal - how to close modal when clicking outside of modal and how to assign ref to modal inside parent component rendering modal?
- Issue when animating modal component with a Portal using React Hooks
- React Redux throws error when displaying records in a Modal View
- react error when trying to update state of parent properties when closing a modal dialog
- React CORS error occurs when integrating with graphQL
- "React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>
- Cannot find namespace 'ctx' error when creating Context with react - typescript
- window not defined error when using extract-text-webpack-plugin React
- React Router BrowserRouter leads to "404 Not Found - nginx " error when going to subpage directly without through a home-page click
- Error when deploying react app and it keeps sayings << Plugin "react" was conflicted between "package.json » eslint-config-react-app » >>
- Getting an "Access Denied" error when I reload my React app on AWS Amplify
- React app runs locally, crashes when on Heroku error code=H10
- Getting 403 ACCESS DENIED error when deploying React Web app on AWS Amplify
- I have Some Error when add Button to my React Native App?
- CORS error when connecting local React frontend to local Spring Boot middleware application
- Why does react hook throw the act error when used with fetch api?
- Why I am getting this error message when I run react js project first time in my system?
- React error when using audio.play() function
- Cryptic React error "unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering."
- Getting error when creating React HOC in Typescript
- Catch return json from POST with Axios when error 400 (Bad Request) occurs
- Objects are not valid as a React child getting error when adding div?
- How to trigger React error boundaries when Promises are rejected?
- "TypeError: Object(...) is not a function" error when trying to use react hooks (alpha)
- React - Material-UI Modal causing an error with the tabindex
- Apollo - React (Typescript) Invariant Error when building production build
- React JS error when I am installing any type of package
- Handling formik form when validation error occurs
More Query from same tag
- How to get checkbox data on form submit in react
- How do I extract messages from multiple specific folders with FormatJS CLI?
- How to tell webpack dev server to serve index.html for any route
- Mutation error when saving redux store. All copied and saved
- ReactJs - Axios : Uploading Image
- How do I display a 404 error to every route that isn't specified?
- React .map only returning first item
- How can I centralize proptypes which are not the same
- React router Dom Link does not change URL
- short circuit evaluation - React
- reactjs - expose react component methods outside react tree
- What is InjectedFormProps in redux-form?
- Passing data from one component to another in React using formik
- How can I turn an array object into an object?
- Push notification in Create-react-app (Web)
- Having trouble with React useState method
- Context Api state is not changing
- update same state twice in react redux
- How to make icon button stick to the left side of the navbar
- Export a function as default while destructuring it for uses within the same class
- Multiple Dialogs on the same page
- ReactJS + Axios "Uncaught (in promise) Error: Network Error" | "Uncaught TypeError: response.data is undefined"
- Display data from database via ID from nested array
- How to handle React Config.js file in Azure DevOps Pipeline
- How to update react state immediately in functional component?
- TextField accepts only one letter and loses focus
- How to show only values of multi selected items using react-select?
- Passing a number to a component
- Can I use higher-order private route components inside a Switch in React Router?
- Consider using the "jsdom" test environment