CODEWITHSUNDEEP
reactjstypescript
Rashmi Milan
Rashmi Milan

Reputation: 15

TypeScript React: How to pass all props to child function

I am new to Typescript React. Need help in converting the following React JS code to Typescript React. Am really confused on how to pass the props to child function.

React JS

blog.js

    import contentarea from './contentarea.js';
    export default function Blog() {
    return (
    <contentarea wid={12} hei={6}>
    </contentarea>
    );
    }

contentarea.js

   import PropTypes from "prop-types";
   export default function contentarea(props) {
   const { children, ...rest } = props;
   return (
   <contentarea  {...rest}>
   {children}
   </contentarea>
   );
   }    

   contentarea.propTypes = {
   children: PropTypes.node
   };

Thanks in advance!

Upvotes: 1

Views: 6836

Answers (1)

Nightraiser
Nightraiser

Reputation: 309

It is not typescript specific, if my understanding of your question is right, you want the wid and hei to be passed to component in the "children" to do so you can wrap it under a HOC

const PropWrapper = (WrappedComponent, givenProps) => {
const hocComponent = ({ ...props }) => <WrappedComponent {...props} {...givenProps} />

hocComponent.propTypes = {
}

return hocComponent}

And use to before you render children

<contentarea>{PropWrapper(children, rest)}</contentarea>

Hope it helps

Upvotes: 2

Related Questions