I'm working with simple structure of react elements:
...
<ComponentWrapper>
<FirstComponent />
<SecondComponent />
<ThirdComponent />
</ComponentWrapper>
...
And in my ComponentWrapper I wanna work with all children, but in my FirstComponent I have such a structure:
const FirstComponent = () => {
return <>
<Subcomponent />
<Subcomponent />
<Subcomponent />
</>
So in this structure in ComponentWrapper I got only 3 child, but actually I have to get 5.
3 kids from FirstComponent and 2 kids from second and third component.
May somebody have an idea how to omit React.Fragment and got 3 child from first component?
You could add whatever components you want to render inside Firstcomponent to an array. and then return that array, like so
export default function FirstComponent () {
const x = [];
x.push(<p>Hello</p>);
x.push(<p>Hello</p>);
x.push(<Subcomponent/>);
x.push(<Subcomponent/>);
return x;
}
or instead of pushing them in an array and then returning the array, just directly return it like this
return [
<p>Hello</p>,
<p>Hello</p>,
<Subcomponent/>,
<Subcomponent/>
]
You might have to give each element a key prop too. Also please note it is always beeter to use react fragment. The react docs have a section that mention this: link