Components 7 exercises

Typing a Component as a Function

Here have our Button component again, but this time we're returning an object with some random stuff:

interface Props {
className: string;
/* @ts-expect-error */
export const Button = (props: Props) => {
return {
ohDear: "123",
const Parent = () => {
return (

Loading exercise


0:00 In this exercise, we have our button component again. Here, we're doing something a little bit silly inside our button component, which is we're returning an object with some random stuff in here.

0:12 This button down the bottom is saying, "It's return type '{ ohDear: string; }' is not a valid JSX element. We can't use this as a component, even though it's properly named and stuff. It's props are Props and the className is working nicely.

0:29 What I would love to have is instead of having the error spill out in the rest of my application, I would love to be able to catch this here, at this component, at this line. I would love to say, if my button here is not returning the right stuff, I want to see an error there.

0:46 Your job is to find some type declaration that I can use to make that happen. I'll give you a clue. It's got to be here. It's got to be at this spot, SomeDefinition. That's got to work then. That's your job is to try and find it.

1:01 I will have some links below that you can check out and see some stuff here, because React has some built in typings that are going to help. That's your job. I think, I've given you everything I want to. Yes, good luck.