CODEWITHSUNDEEP
reactjstypescriptreact-typescript
Marc Sharma
Marc Sharma

Reputation: 55

Very simple MWE, typescript error TS2322 (...) not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'

I'm working on a React/typescript project. I'm trying to wrap my head around error TS2322 and solve it.

Type '{ submissionsArray: SubmissionProps[]; }' is not assignable to type 'IntrinsicAttributes & SubmissionProps[] & { children?: ReactNode; }'.
  Property 'submissionsArray' does not exist on type 'IntrinsicAttributes & SubmissionProps[] & { children?: ReactNode; }'.  TS2322

I've seen a lot of people have the problems, and solutions either don't apply to my context or are magic at play.

Here is the very short MWE

import React, { FunctionComponent } from 'react'

type Props = {
    name: string
}

const PropsSpan: FunctionComponent<Props> = (props) => <span>{props.name}</span>

const PropsComponent = () => {
    const p: Props = { name: 'George' }
    return <PropsSpan props={p}></PropsSpan>
}

export default PropsComponent

What I tried: a magical solution is to use {...p}, but I don't understand why, and it also requires additional instructions on the end of the functional component, if I was working with array of props.

My Question: how to solve this error ?

Upvotes: 1

Views: 1222

Answers (2)

Elias
Elias

Reputation: 4112

You could use this, but it is definitely not the JSX way.

import React, {ReactElement} from 'react';

interface ComponentProps {
    str: string;
}

const Component = (props: ComponentProps): ReactElement => {
    return <p>{props.str}</p>;
};



const App = (): ReactElement => {
    const props: ComponentProps = {
        str: 'hey',
    };

    return (
        <div>
            {React.createElement(Component, props)}
        </div>
    );
};

I recommend using the spread operator ... like you told us about in the question and was proposed by Phoenix.

You said you would not understand it so the quick explanation:

const obj1 = {a: 'foo', b: 'bar'};

const obj2 = {
    something: 'hello world',
    ...obj1,
};
console.log(obj2) -> {a: 'foo', b: 'bar', something: 'hello world'};

Spread Syntax refference

So in your case, it would populate the props much like:

<Component
    prop1={<something>}
    prop2={<something>}
/>

And what you did was:

<Component
   props={{prop1: <something>, props2: <something>}}
/>

The interface for that would have to look like:

interface ComponentProps {
    props: {
        prop1: SomeType;
        prop2: SomeType;
   };
};

Upvotes: 0

Phoenix1355
Phoenix1355

Reputation: 1652

You're not passing the props correctly. Props should be passed directly as attributes to the component like so:

const PropsComponent = () => {
    return <PropsSpan name="George"></PropsSpan>
}

If you want to create the props object first, and then pass it down as props to the PropsSpan component, you could use object destructuring instead, like so:

const PropsComponent = () => {
    const p: Props = { name: 'George' }
    return <PropsSpan {...p}></PropsSpan>
}

It gives the same effect as above, though it is not recommended.

Upvotes: 1

Related Questions