React: Type is missing the following properties from type

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

Copied!
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

Copied!
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

Copied!
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

Copied!
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

Copied!
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 #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

React: Type is missing the following properties from type

React: Type is missing the following properties from type #

Conclusion #

Borislav Hadzhiev