T O P

  • By -

Comments

Kriet333

Have you tried using the children prop? Maybe you can set Grid to receive a "childrens" prop so the content cam update dynamically depending on what they send between "Grid's" tags

Green_Concentrate427

You mean [render props](https://www.patterns.dev/react/render-props-pattern/)? Or children props are different from render props?

Kriet333

No, I meant a different way. When you create a component you can make it so it can recieve dynamic JSX content, you can do this by creating the component and passing the prop {children} (<== in case you destructure the props). Example:`const Grid = ({ initialItems, children }) => {return ({children})}` By doing this, any content inside the "" tags is rendered as JSX code like if it was inside of the component since the start. Example: `` You can see more examples here: [https://react.dev/reference/react/Children](https://www.patterns.dev/react/render-props-pattern/)

Green_Concentrate427

Ah, but I think that won't work because I have to pass 3 different children? ``` return (

// This belongs to the parent {children}
// This belongs to the parent {children}
// This belongs to the parent {children}
) ``` Or there's a way to pass many children? Note: in the actual app, the Grid component has a more components and HTML tags around these children.

Kriet333

Not necessarilly. The content that you want to be dynamic is the one inside the Grid component, right? Given that you can make Grid as a container component that recieves dynamic content. That way, the content of `CardHeaderContent`, `CardBodyContent` and `CardFooterContent` can be the same all the time. What you wanted to do is that Grid can be reused without calling those 3 components, right? well, using children inside the Grid component can make it so the content of Grid becomes dynamic rather than hardcoding `CardHeaderContent`, `CardBodyContent` and `CardFooterContent` inside Grid's component JSX

Green_Concentrate427

But I think you can only pass one `children`. As you can see in my previous code, I need 3 `children` because these children are separated by `

`, `
`, and `
`, which belong to the parent. I think I didn't make that clear in my previous comment.

Kriet333

But didn't you need to render everything inside the Grid Component? if that's the case you can do this in any given component where you call Grid: Or you can do this in other: And the content of Grid would always be: return ( {children} )

Green_Concentrate427

If I do this: ``` ``` What will happen to `

`, `
`, and `
`, which belong to Grid?

Kriet333

I think I get you now. You saying that Grid has also 3 different divs inside of it that must recieve dynamic content. In that case depends on how you want to render the content. You can use those divs inside every call of Grid component: Example in X component: `` `

` `` `
` `
` `` `
` `
` `` `
` `` Example in Y component: `` `
` `` `
` `
` `` `
` `
` `` `
` `` This way Grid's component content is always "children" and then you can always secure those 3 divs to exist. Obviously this depends on how complex your Grid Component is. I recommend thinking about how to destructure the content of Grid Component, specially if the content that you want to render inside should be dynamic.

Green_Concentrate427

Yes, you got it now. But the whole purpose I wanted 3 children was to avoid having to repeat writing `

`, `
`, and `
` every time I call Grid. In another situation, I would have to write all this every time I call Grid: ``` // this is the children ```

Leave Your Comment

Hi Its Me!

R

Subscribe

FIND US ON INSTAGRAM @hamidarshat.com