React.js: Property is missing in type but required in type

React.js: Property is missing in type but required in type #

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.

property missing in type but required in type

Here is an example of how the error occurs.

App.tsx

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

App.tsx

Copied!
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" />.

App.tsx

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

App.tsx

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

This means that the property can either have a value of type 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.

App.tsx

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

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.

Conclusion #

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.

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.js: Property is missing in type but required in type

React.js: Property is missing in type but required in type #

Conclusion #

Borislav Hadzhiev