score:7
by doing in panel.tsx
panel.content = panelcontent;
panel.header = panelheader
typescript complains since the properties content and header are custom and don't exist on the base forwardref type.
to fix it declare a custom interface that extends forwardref base type and add your custom properties header and content:
interface ipanel
extends react.forwardrefexoticcomponent<
panelprops & react.refattributes<htmldivelement>
> {
header: typeof panelheader;
content: typeof panelcontent;
}
and use it like this:
const forwardref = react.forwardref<htmldivelement, panelprops>(
(props, ref): jsx.element => {
return (
<panelcomponent
{...props}
forwardedref={ref}
data-testid={panel_test_id}
/>
);
}
);
export const panel = {
...forwardref,
header: panelheader,
content: panelcontent
} as ipanel;
or... just do export const panel: any
but you lose type checking by doing this
working codesandbox forked from yours.
score:3
you can fix this error by using object.assign
. this works because object.assign is typed as assign<t, u>(target: t, source: u): t & u;
, so the types t and u can be inferred, and the return type becomes a mix of the forwardref exotic component type and the object with header
and content
properties.
export const panel = object.assign(
react.forwardref(
(props: panelprops, ref: react.ref<htmldivelement>): jsx.element => {
return (
<panelcomponent
{...props}
forwardedref={ref}
data-testid={panel_test_id}
/>
);
}
),
{
header: panelheader,
content: panelcontent
}
);
Source: stackoverflow.com
Related Query
- How to attach a compound component when using React forward ref (property does not exist on forwardRefExoticComponent)
- How to notify parent component of property change when using react hooks?
- How to prevent child component from re-rendering when using React hooks and memo?
- How to pass the match when using render in Route component from react router (v4)
- How to attach drag event handlers to a React component using TypeScript
- React Redux - How to dispatch an action on componentDidMount when using mapDispatchToProps in a connected component
- How can I attach a ref to a component that i am copying using React.cloneElement
- How can I spread props to a React component that uses exact props when using Flow?
- How should unsubscribe be handled in a react component when using redux?
- Property does not exist on React component when defined with recompose
- Getting the ref from a dynamic component when using Redux, React and react-router-dom 4.x
- How do I check if user is 'logged in' in a react component when using laravel authentication?
- How to solve closures issue when using React functional component with React.memo?
- How to re-render react component when a property changes
- How does one type @connect correctly when using React and TypeScript?
- How does React Context work by using a function inside of a component
- Why does the render function in react is called twice when using the component strategy?
- How to statically type a string property within a React component using Typescript
- How to prevent component from unmounting immediately when using React Router V4
- react Portal - how to close modal when clicking outside of modal and how to assign ref to modal inside parent component rendering modal?
- How to set two properties for a React component as optional depending on another property using TypeScript?
- How do I create a class decorator for mixing new methods into a React component when using Typescript?
- How to prevent React from re-rendering the whole component when using setInterval
- TypeScript errors in React Class Component property does not exist on type 'Readonly<{}>', not sure how to set types for state
- How to change the state of the particular component when it is clicked, using useState in react js?
- How does this functional component using react hooks get its parameters?
- How to fix "TypeError: Object(...) is not a function" when using a wrap function on React Component to authenticate user login with Browser Router
- Unable to set ref due to error "TS2339: Property 'X' does not exist on type 'Y' " inside a react component
- How to get parent props in child component when using styled component in react
- How to loop a component when I click a h3 tag in react using Hooks
More Query from same tag
- How to search and return objects by value in javascript (and maybe lodash)
- Showing Real Time Variable Value In <Text> Component - React Native
- Want to give different state to each element with redux
- Material UI Grid not working properly with Paper Component for nested Grid
- How to declare defaultProps on a React component class using TypeScript?
- How to use Jest with React and Webpack
- React Typescript prop error in ListItem (Material UI component)
- Firestore slow queries are causing the entire logic to crash
- how to apply filter in list using react
- How to change default localhost port for React App
- Pass object through Link in react router
- Multiple/bulk delete in react + redux
- React JS Attempted import error: './Pathfinder/Pathfinder' does not contain a default export (imported as 'Pathfinder')
- Redirecting a user to the page they requested after successful authentication with react-router-dom
- How can I pass the keyword from API? (React and Django)
- Why React useState return const array
- How to change props in a Material UI component according to URL?
- Add accessibility and validation to a search form
- React-Redux, how to change state?
- How to pass the specific element to function in react
- How to handle 'undefined' error for dynamically changing deep nested objects in javascript
- Show only the existing elements in React
- Creating UseEffect react hook which should go through JSON data and switch the state
- console.log(this) following by console.log(this.props) don't show same common values
- Mongoose : Cast to ObjectId failed for value "Some String" at path "_id"
- Gatsby Redux combineReducers function
- How to add gulp to reactjs?
- How to propagate resolve() in nested promises?
- Getting error unexpected use of history when trying to redirect?
- how do it pass props to each component when having this kind of structure of routing