CODEWITHSUNDEEP
reactjstypescript-typings
Megha bagri
Megha bagri

Reputation: 74

Typescript prop issue

I am trying to send an array of react elements to a component. My Component -

type StatusPanelProps = {
statusIconID: string;
    statusData: ReactNode;
};
const StatusPanel = (rows: Array<StatusPanelProps>): JSX.Element => {
    return (
        <Column styles={statusPanelStyles} testID="status_panel" spacing={25}>
            {rows.map((row, i) => (
                <Row testID="status_part" spacing={15} key={i}>
                    <Column testID="status_icon">
                        <Icon id={row.statusIconID} />
                    </Column>
                    <Column testID="status_data">{row.statusData}</Column>
                </Row>
            ))}
        </Column>
    );
};

And I call it like -

export default function LeftPanel(): JSX.Element {
    const statusArray: Array<StatusPanelProps> = [];

    !isLoadingLeftPanel &&
        getCompleteStatus(leftPanel).map((status: Partial<TDModellingLeftPanel>) =>
            statusArray.push({
                statusIconID: getStatusIconIds(status),
                statusData: <Status statusInfo={status} />,
            })
        );

    return <StatusPanel rows={statusArray} />;
}

but this gives me an error no idea why -

Type '{ rows: StatusPanelProps[]; }' is not assignable to type 'IntrinsicAttributes & StatusPanelProps[]'. Property 'rows' does not exist on type 'IntrinsicAttributes & StatusPanelProps[]'.

Upvotes: 0

Views: 41

Answers (1)

Jorrmungandr
Jorrmungandr

Reputation: 107

It seems that you forgot to use destructuring in your StatusPanel component, instead of

const StatusPanel = (rows: Array<StatusPanelProps>): JSX.Element => {

try

const StatusPanel = ({ rows }: { rows: Array<StatusPanelProps> }): JSX.Element => {

Upvotes: 1

Related Questions