React: Type is missing the following properties from type

avatar

Borislav Hadzhiev

Last updated: Mar 21, 2022

banner

Photo from Unsplash

React: Type is missing the following properties from type #

The React.js error "Type is missing the following properties from type" occurs when we don't pass any props to a component, or don't pass it all of the props it requires. To solve the error, make sure to provide all of the props that are required in the component.

type missing following properties from type

Here is an example of how the error occurs.

App.tsx
type BoxProps = { name: string; age: number; country: string; }; const Box = (props: BoxProps) => { return ( <div> <p>{props.name}</p> <p>{props.age}</p> <p>{props.country}</p> </div> ); }; const App = () => { return ( <div className="App"> {/* ⛔️ Error: Type '{}' is missing the following properties from type 'BoxProps': name, age, country ts(2739) */} <Box /> </div> ); }; export default App;

Notice that the Box component expects to take 3 props (defined in the BoxProps type), however when we use the Box component in App, we don't provide the required props.

The error also occurs if you provide only some of the required props to a component.

App.tsx
type BoxProps = { name: string; age: number; country: string; }; const Box = (props: BoxProps) => { return ( <div> <p>{props.name}</p> <p>{props.age}</p> <p>{props.country}</p> </div> ); }; const App = () => { return ( <div className="App"> {/* ⛔️ Error: Type '{ name: string; }' is missing the following properties from type 'BoxProps': age, country ts(2739) */} <Box name="Tom" /> </div> ); }; export default App;
We only passed the name prop to the Box component, however it also requires the age and country properties, which caused the error.

To solve the error, we have to make sure to pass all of the required props when using the component.

App.tsx
type BoxProps = { name: string; age: number; country: string; }; const Box = (props: BoxProps) => { return ( <div> <p>{props.name}</p> <p>{props.age}</p> <p>{props.country}</p> </div> ); }; const App = () => { return ( <div className="App"> {/* ✅ All props passed */} <Box name="Tom" age={30} country="Germany" /> </div> ); }; export default App;

If you don't want to have to pass some of the props to the component, you can mark them as optional in the type.

App.tsx
type BoxProps = { name: string; age?: number; // 👈️ mark as optional country?: string; // 👈️ mark as optional }; const Box = (props: BoxProps) => { return ( <div> <p>{props.name}</p> <p>{props.age}</p> <p>{props.country}</p> </div> ); }; const App = () => { return ( <div className="App"> {/* ✅ All props passed */} <Box name="Tom" /> </div> ); }; export default App;

We marked the age and country properties as optional, so we aren't required to pass them to the component every time.

When a property in a type is marked as optional, it can either be of the specified type or be undefined.

You can also use default values when defining the props object of a component.

App.tsx
type BoxProps = { name?: string; // 👈️ mark optional language: string; country?: string; // 👈️ mark optional }; const Box = ({name = 'James Doe', language, country = 'Germany'}: BoxProps) => { return ( <div> <div>{name}</div> <div>{language}</div> <div>{country}</div> </div> ); }; const App = () => { return ( <div className="App"> {/* ✅ Didn't have to pass name and country props */} <Box language="TypeScript" /> </div> ); }; export default App;

Notice that we marked the name and country properties as optional in the BoxProps type.

We set default values for the two properties in the Box component, so if we don't explicitly provide values for the name and country props, the default values will be used.

The name of the component that caused the error will most likely be underlined in your error message.

type missing following properties from type

Make sure to pass all of the required props to the underlined component.

The "Type is missing the following properties from type" error can also occur if pass props to the component that you haven't defined in the component's props interface.

In this case, you would have to add the properties and types to the component's type alias or interface.

Conclusion #

The React.js error "Type is missing the following properties from type" occurs when we don't pass any props to a component, or don't pass it all of the props it requires. To solve the error, make sure to provide all of the props that are required in the component.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.