Quantcast
Channel: Active questions tagged visual-studio-code - Stack Overflow
Viewing all articles
Browse latest Browse all 97400

JSX tag has a child, but VSCode says that property `children` is missing in props

$
0
0

I have a very simple TypeScript/React/TSX setup but the following piece of code shows an error:

import React from 'react';
import Layout from '../components/Layout';

export default function Index() {
    return (
        <Layout>
            <div>Hello world</div>
        </Layout>
    );
}

The <Layout [...]> tag is underlined in red, saying: Property 'children' is missing in type '{}' but required in type 'LayoutProps'.ts(2741).

Indeed, the props (LayoutProps) of the Layout component requires children:

export interface LayoutProps {
    children: React.ReactNode;
}

However, as you see in the first snippet, there is actually a child, a <div/>. I'm trying to figure out why it is not "detected" by TypeScript.

If I define the children prop as an JSX attribute, as in <Layout children={null} />, the error disappears, as if I could only define children using this syntax.

I'm using TypeScript v3.7.4 with a basic React/NextJS-friendly tsconfig.json.


Viewing all articles
Browse latest Browse all 97400

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>