Question 246728 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to render inside elements of a custom component with react typescript

I have a question regarding the element which is inside custom parent component, how to catch it and render it.

For example:
Parent

interface ComponentProps{
 message: string;
}
export default MyComponent: FunctionComponent = <ComponentProps>(props: ComponentProps) => {
render (
<div>{props.message}</div>
)
}

Now, imagine i call this component with inside elements, like this

<MyComponent message='Test'>
<div>How to render this div inside MyComponent, how to catch it?</div>
</MyComponent>

So, the question is how to accept this inside MyComponent and render it as wel?

Thanks in advance

Tags:

2

Answers


  1. 0

    this should be pretty straight forward,

    your can have a property called children with the type of React.ReactNode and use this children on the MyComponent

    
interface ComponentProps{
 message: string;
 children: React.ReactNode;
}
export default function MyComponent(props: ComponentProps) => {
render (
<>
  <div>{props.message}</div>
  <div>{props.children}</div> 
</>

);
}

    the place where u are using this

    
<MyComponent message='Test'>
<div>How to render this div inside MyComponent, how to catch it?</div>
</MyComponent>

    with the above changes your custom div with text "How to render this div inside MyComponent, how to catch it?" is going to rendered within MyComponent

    Login or Signup to reply.
  2. 0

    Here is a more practical example demonstrating the children property of a functional component in React.

    The wrapper component will return a wrapped version of the children passed to it and display a message alert box at the top.

    import { ReactNode } from "react";

export type ComponentMessageWrapperProps = {
  message: string;
  children: ReactNode;
};

/* Wraps children inside of a border with a message at the top. */
export default const ComponentMessageWrapper = ({
  children,
  message,
}: ComponentMessageWrapperProps) => {
  return (
    <div className="ComponentWrapper">
      <div className="message">{message}</div>
      <>{children}</>
    </div>
  );
};

    import ComponentMessageWrapper from './ComponentMessageWrapper.tsx';

const App = () => {
  return (
    <div className="App">
      <ComponentMessageWrapper message="Test">
        <div>This DIV is rendered inside of ComponentMessageWrapper</div>
      </ComponentMessageWrapper>
    </div>
  );
};

export default App;

    Here is a working JSX snippet of the TSX code above above.

    const { Fragment } = React;

/* Wraps children inside of a border with a message at the top. */
const ComponentMessageWrapper = ({ children, message }) => {
  return (
    <div className="ComponentWrapper">
      <div className="message">{message}</div>
      <Fragment>
        {children}
      </Fragment>
    </div>
  );
}

const App = () => {
  return (
    <div className="App">
      <ComponentMessageWrapper message="Test">
        <div>This DIV is rendered inside of ComponentWrapper</div>
      </ComponentMessageWrapper>
    </div>
  );
};

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App />);
    .ComponentWrapper {
  padding: 0.5rem;
  border: thin solid #700;
}

.ComponentWrapper .message {
  margin-bottom: 1rem;
  padding: 0.25rem;
  border: thin solid #700;
  background: #EAA;
  color: #700;
}
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search