React - Property does not exist on type IntrinsicAttributes

Question

I'm new to React and am seeing this error which I can't figure how to resolve:

Property classes does not exist on type IntrinsicAttributes .

I have the following code:

class SeriesView extends React.Component<Props> {
    render() {

        return (
            <SeriesDetail classes={this.props.classes} />
        )
    }
}

And the SeriesDetail is declared as:

const SeriesDetail: React.FC<{}> = () => {
    //This just gets some payload
    const service = useGetSeriesService();

    if (service.status === 'loading') {
        return <div>Loading...</div>
    } else if (service.status === 'loaded') {
        const seriesData = service.payload[0]
        return (
            <div>
                <h1 className=""> 
                    {seriesData.description}
                </h1>
            </div>
            );

    } else if (service.status === 'error') {
        return <div>Oops!</div>
    } else {
        return <div></div>
    }

};

So its at the point className="" I want to be able to pass in something like classes.clearStyle which is set in props .

Any ideas on how I do this?

Also, being new to React, if there are any other suggestions, I'd really appreciate any guidance.

Thanks.

Answer 1

If you want to have "custom props" on your react components with typescript, you need to define them in the prop types:

interface SeriesDetailProps {
  classes: {
    clearStyle: string;
  };
}

const SeriesDetail: React.FC<SeriesDetailProps> = (props) => {
 // ...
}

Only then you can pass these props and have proper type checking. It looks like you have already defined Props for your SeriesView component, so I guess you could adapt them for the SeriesDetail component.