The error "Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'." occurs when we pass in children to a component which doesn't take any props.

Problem

error

The above error occurred as the result of the following code:

const Container = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Container>  //👈 error since this component does not take a child
        <h1>Sharooq</h1>
      </Container>
    </div>
  );
};

export default App;
error code

Here, we are passing the children prop to the "Container" component, which doesn't have the children prop defined.

When a component is used with an opening and closing tag, everything written in between these tags are considered to be the "children" props.

Solution

You can solve the error by defining the children as a prop to the "Container" component and since we are using TypeScript, we need to type the "Container" component of its prop inputs. See the solved code for the above error:

type ContainerProps = {
  children: React.ReactNode; //👈 children prop typr
};

const Container = (props: ContainerProps) => { //👈 prop definition
  return (
    <div>
      <h1>Hello World</h1>
      {props.children}  //👈 Access children
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Container>
        <h1>Sharooq</h1>
      </Container>
    </div>
  );
};

export default App;
solved code

Here, we have defined the props and assigned the type of the props for TypeScript. Then we accessed the passed on children as "props.children".

Another way to ignore or disable the error is to use the "any" type on the props. This will effectively disable the type checking of TypeScript.

const Container = (props: any) => {
  return (
    <div>
      <h1>Hello World</h1>
      {props.children}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Container>
        <h1>Sharooq</h1>
      </Container>
    </div>
  );
};

export default App;
disable type checking method

This is not a good practice since the whole reason for using TypeScript is to recognise and handle these errors.

Alternatively, if you passed in the children prop by mistake, you need to remove the child and use a self-closing tag while calling the component.

Self closing tags have the format of <Component/>. They do not have a opening and closing tag and doesn't have any child elements in between.
const Container = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Container/>
    </div>
  );
};

export default App;
no children

Conclusion

If you are passing any children to a component, make sure the component has props defined to take in the children. While using TypeScript, it is necessary to define the typing of the props being passed. Otherwise, errors such as mentioned above would occur.

Here is another example of an error that was caused by not typing the children prop.

Solved - Property ‘children’ does not exist on type ‘y’ in React
The “children does not exist on type” error occurs when we are not passing the children type to the component in use.
Solved - Property 'children' does not exist on type 'y' in ReactSharooq Salaudeen

Thank you for reading, Check out my other articles. See you in the next one.