Type '{ variableName: string; }' is not assignable to type 'string'

September 6, 2023

I am getting this error to me and reading makes complete sense, but it makes no sense to me as to why I am getting it.

In the example below myOtherVariable is a string and variableName or so I thought… Am I missing something here?

Type '{ variableName: string; }' is not assignable to type 'string'

Here is how it is being called

const DynamicArea = (variableName: string) => (
   <div>Eventually this will be filled with some cool data</div>
);


export const myFunction = () => {
   const myOtherVariable = '';

   return (
       <DynamicArea variableName={myOtherVariable} />
   );
};

>Solution :

Try it like this by destructuring your props. Thats a common pitfall because you are typing the props object as a string but the props parameter is an object and you want to destructure a certain property out of it instead in your code:

const DynamicArea = ({ variableName }: { variableName: string }) => (
    <div>Eventually this will be filled with some cool data</div>
);

As you see maybe now the error Type '{ variableName: string; }' is not assignable to type 'string' is indicating it that you are passing the component a { variableName: string } type but you declared it as string