React native does not return children prop-CodePudding

I need to return children prop but nothing appears on my screen. Got two errors back -

'Header' cannot be used as a JSX component.
  Its return type 'void' is not a valid JSX element.

Second error -

Type '{ iconLeft: string; label: string; }' is not assignable to type 'IntrinsicAttributes & HeaderItemProps'.
  Property 'iconLeft' does not exist on type 'IntrinsicAttributes & HeaderItemProps'.

Main component

type HeaderProps = {
    children: React.ReactNode;
};

type HeaderItemProps = {
    label: string;
    iconLeft?: IconName<32>;
};

export function Header({ children }: HeaderProps) {
    <View>{children}</View>;
}

export function HeaderItem({ label, iconLeft,}: HeaderItemProps) {
    return (
        <Pressable onPress={onPress} style={styles.container}>
            {iconLeft && <Icon size={32} name={iconLeft} />}
            <Text>{label}</Text>
        </Pressable>
    );
}

File where i have the children

export function Children()

return (
    <View>
            <Header iconLeft="icon2" label="item" /> 
    </View>
);
}

Tried also returning like this

<Header>
 <HeaderItem iconLeft="icon2" label="item" />
</Header>

CodePudding user response：

Your Header component should return that jsx data, you have missing return statement.

export function Header({ children }: HeaderProps) {
    return (<View>{children}</View>);
}