jsx-eslint/eslint-plugin-react

Failed prop type: its value is `undefined`.

zulalc opened this issue · 2 comments

Hello, this is my first time opening an issue, i don't quite know how to format this, so I apologize beforehand.

This is my code:

import Navbar from "./Navbar";
import { PropTypes } from "prop-types";

const Layout = ({ children }) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
    </>
  );
};

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

My console says:

Warning: Failed prop type: The prop `children` is marked as required in `Layout`, but its value is `undefined`.

I am new to jsx, could not understand the reason why.

First, the code that's issuing the warning is the usage of this component, not the component itself; second, React, not this eslint plugin, is emitting the warning; third, the propTypes explicitly say you're required to provide children, so presumably you have <Layout /> somewhere instead of <Layout>{something}</Layout>

@ljharb Oh okay, got it now. Thanks.