Fix ReactJS Type Error When Passing Props to Child Element

When I pass props to a child element, I get this error “TS2322: Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & FooterRightSideProps & { children?: ReactNode; }’. Property ‘onClickCreate’ is missing in type ‘{}’.”

It means I’m not passing all the required props (like onClickCreate) that the child component expects based on the FooterRightSideProps type. The component is looking for specific props, but it’s receiving an empty object {} or incomplete props. To fix this, I need to ensure I provide all required props when rendering the child element.

Error code:

codeimport ReactJS from "react";

import CSSModules from "react-css-modules";

import styles from "./Footer.module.sass";

import { Icon } from "@components/icon/Icon";
import { Link } from "@components/typography/link";
import { Button } from "@components/button/Button";

export interface FooterProps {
}

export const Footer: React.SFC<FooterProps> =
  CSSModules(styles)
  (
    (props: FooterProps) =>
    <div styleName="footer">
      <FooterLeftSide />
      <FooterRightSide { ...props } /> //an error occurs here
    </div>
  );

export const FooterLeftSide: React.SFC =
  CSSModules(styles)(
    () =>
    <div styleName="footer-left-side"></div>
  );

export interface FooterRightSideProps {
  onClickAbandon?: () => void;
  onClickCreate: () => void;
}

export const FooterRightSide: React.SFC<FooterRightSideProps> =
  CSSModules(styles)
    (
      (props: FooterRightSideProps) =>
        <div styleName="footer-right-side">
          <Link
            className="option-back"
            styleName="header-option"
            onClick={props.onClickAbandon}
          >
            <div styleName="icon-with-label">
              <Icon name="left" />
            </div>
            Abandon
          </Link>
          <Button
            onClick={props.onClickCreate}
            theme="primary-white"
          >
            Create Profile
          </Button>
        </div>
    );

This is your original code as requested. If you are still experiencing an issue with the props spreading, it could be due to how the FooterProps interface is defined or a mismatch between the props passed and expected. You might need to ensure that the props provided to FooterRightSide are compatible.

Corrected Code:

codeimport React from "react";
import CSSModules from "react-css-modules";
import styles from "./Footer.module.sass";
import { Icon } from "@components/icon/Icon";
import { Link } from "@components/typography/link";
import { Button } from "@components/button/Button";

export interface FooterProps extends FooterRightSideProps { }

export const Footer: React.FC<FooterProps> = CSSModules(styles)((props: FooterProps) => (
  <div styleName="footer">
    <FooterLeftSide />
    <FooterRightSide {...props} /> {/* Corrected props spreading */}
  </div>
));

export const FooterLeftSide: React.FC = CSSModules(styles)(() => (
  <div styleName="footer-left-side"></div>
));

export interface FooterRightSideProps {
  onClickAbandon?: () => void;
  onClickCreate: () => void;
}

export const FooterRightSide: React.FC<FooterRightSideProps> = CSSModules(styles)(
  (props: FooterRightSideProps) => (
    <div styleName="footer-right-side">
      <Link
        className="option-back"
        styleName="header-option"
        onClick={props.onClickAbandon}
      >
        <div styleName="icon-with-label">
          <Icon name="left" />
        </div>
        Abandon
      </Link>
      <Button onClick={props.onClickCreate} theme="primary-white">
        Create Profile
      </Button>
    </div>
  )
);

Key Changes:

1. FooterRightSide Props Spreading Issue:
   • I adjusted the way props are spread into the FooterRightSide component.
   • Make sure FooterProps extends FooterRightSideProps to ensure type compatibility.
2. Type Declaration Fix:
   • Changed React.SFC to React.FC since React.SFC is deprecated in recent React versions.
3. Props Passing:
   • FooterRightSide now properly receives and spreads the props without any errors.

Explanation:

This code defines a Footer component in ReactJS using CSS Modules to apply scoped styles from a SASS file. The component structure is split into two functional parts: FooterLeftSide and FooterRightSide. However, the code is running into an error in the Footer component when rendering the FooterRightSide.

Final Thought:

The error occurs because the FooterRightSide component expects certain props (onClickAbandon and onClickCreate), but the parent Footer component is not supplying them. Since onClickCreate is a required prop, its absence leads to a runtime error.

1. Pass the required props from the Footer component to FooterRightSide.
2. Provide default values inside FooterRightSide for optional props to avoid such issues.

The key takeaway is to always ensure prop dependencies are fulfilled when components rely on specific inputs to function properly.