Borislav Hadzhiev
Mon Mar 21 2022·3 min read
Photo by Kristen Leigh
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.
Here is an example of how the error occurs.
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.
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;
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.
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.
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.
undefined
.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.The name of the component that caused the error will most likely be underlined in your error message.
Make sure to pass all of the required props to the underlined component.
In this case, you would have to add the properties and types to the component's type alias or interface.