Next.js Discord

Discord Forum

Can anyone help me to solve this typescript error message, please?

Unanswered
Jacquit posted this in #help-forum
Open in Discord
I got this error message when I tried to pass down data to a child component:

Type '{ title: string; text: string; image: { src: string; alt: string; align: string; background: string; }; }' is not assignable to type 'TextWithImageProps'.
The types of 'image.align' are incompatible between these types.
Type 'string' is not assignable to type 'AlignProps'
Can

Here is my interface:
type AlignProps = "left" | "right";

export interface TextWithImageProps {
title: string;
text: string;
image: {
src: string;
alt: string;
align: AlignProps;
background: string;
};
}

Here is the data I am trying to pass down the child component:
const data = {
title: 'Welcome to this digital platform',
text: "<h3>Hello world!</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><ul><li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> <li><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></li></ul>",
image: {
src: 'https://images.unsplash.com/photo-1530686245768-ec6aac46aa3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
alt: 'Cloudy blue sky in the montainous area',
align: 'left',
background: '#6a6a6a',
},
};

2 Replies

@Jacquit I got this error message when I tried to pass down data to a child component: Type '{ title: string; text: string; image: { src: string; alt: string; align: string; background: string; }; }' is not assignable to type 'TextWithImageProps'. The types of 'image.align' are incompatible between these types. Type 'string' is not assignable to type 'AlignProps' Can Here is my interface: type AlignProps = "left" | "right"; export interface TextWithImageProps { title: string; text: string; image: { src: string; alt: string; align: AlignProps; background: string; }; } Here is the data I am trying to pass down the child component: const data = { title: 'Welcome to this digital platform', text: "<h3>Hello world!</h3><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><ul><li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> <li><p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p></li></ul>", image: { src: 'https://images.unsplash.com/photo-1530686245768-ec6aac46aa3a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80', alt: 'Cloudy blue sky in the montainous area', align: 'left', background: '#6a6a6a', }, };
const data: TextWithImageProps = { … }
Thank you so much @jouvel, you are a lifesaver.