Borislav Hadzhiev
Tue Mar 22 2022·3 min read
Photo by Caleb White
The React.js error "Property is missing in type but required in type" occurs
when we don't pass all of the required props to a component. To solve the error,
make sure to pass all of the props the component requires, e.g.
<MyComponent name="Tom" age={30} />
or mark its props as optional.
Here is an example of how the error occurs.
import React from 'react'; type BoxProps = { children: React.ReactNode; name: string; // 👈️ required }; const Box = (props: BoxProps) => { return ( <div> <div>{props.children}</div> <div>{props.name}</div> </div> ); }; const App = () => { return ( <div className="App"> {/* ⛔️ Error: Property 'name' is missing in type '{ children: Element; }' but required in type 'BoxProps'.ts(2741) */} <Box> <div>Hello world</div> </Box> </div> ); }; export default App;
The Box
component has a name
prop of type string
that is required,
however, when we used the Box
component in App
, we didn't pass it the name
prop, so the error occurred.
Notice how the error message above shows the component which caused the error with an underline.
To solve the error, make sure to pass all of the required props when using the component.
import React from 'react'; type BoxProps = { children: React.ReactNode; name: string; }; const Box = (props: BoxProps) => { return ( <div> <div>{props.children}</div> <div>{props.name}</div> </div> ); }; const App = () => { return ( <div className="App"> {/* ✅ All props passed to component */} <Box name="James Doe"> <div>Hello world</div> </Box> </div> ); }; export default App;
If your component does not take a children prop, use it as
<MyComponent myProp="value" />
.
type BoxProps = { name: string; }; const Box = (props: BoxProps) => { return ( <div> <div>{props.name}</div> </div> ); }; const App = () => { return ( <div className="App"> {/* ✅ All props passed to component */} <Box name="James Doe" /> </div> ); }; export default App;
An alternative solution is to mark any of the props, you don't intend to pass all of the time as optional.
type BoxProps = { name: string; language?: string; // 👈️ mark optional country: string; }; const Box = (props: BoxProps) => { return ( <div> <div>{props.name}</div> <div>{props.language}</div> <div>{props.country}</div> </div> ); }; const App = () => { return ( <div className="App"> {/* ✅ Didn't have to pass language prop */} <Box name="James Doe" country="Germany" /> </div> ); }; export default App;
We marked the language
property in the BoxProps
type as optional.
string
or be undefined
, so we aren't required to provide it every time we use the component.If you don't know what the types of all of the props your component takes are
and would like to turn off type checking, use any
as the type of the props
.
const Box = (props: any) => { return ( <div> <div>{props.name}</div> <div>{props.language}</div> <div>{props.country}</div> </div> ); }; const App = () => { return ( <div className="App"> {/* ✅ Type checking is off, can pass any props */} <Box name="James Doe" country="Germany" hello="world" /> </div> ); }; export default App;
By using the any
type we turn off type checking, so we can pass any props to
the Box
component without getting any errors.
You can also use default values when defining the props object of a component.
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.
Box
component, so if we don't explicitly provide values for the name
and country
props, the default values will be used.To solve the "Property is missing in type but required in type" error, look at your error message and make sure to pass all of the required props to the underlined component or mark props you don't intend to pass every time as optional.