How to pass the children component to another component?

Question

React

I have a Button component in react-native app

const Button = ({children, callback, ...props}) => {
    return (
        <MainButton {...props} onPress={callback}>
            <Text>
                {props.children}
            </Text>
        </MainButton>
    )
}

How can I pass content to it when I paste it in another component?

<Button
callback={() => setStatusQrCode(false)}
color={color_white}
background={color_blue}
weight={600}>
    {<Text>Продолжить</Text>}
</Button>

PS I can't find a pattern that shows how to pass any component as children

Answer 1

const Button = ({ children, callback, ...props }) => {
    return <MainButton {...props} onPress={callback}>{children}</MainButton>;
};

Answer 2

So children contains all the components that you have registered inside the tag. Roughly speaking, the component tree.
If you want to pass all the components nested in it to MainButton -> Text in the button component, then you need to figure out not props.children there, but directly the children argument