Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 'Button' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element

I am getting error in my code, this is first time I am using react, previously I ran the code few days back it just run fine:

src/components/ResponseLengthButtonGroup/ResponseLengthButtonGroup.tsx:22:18 - error TS2786: 'Button' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.

22                 <Button id="Thorough" className={`${defaultValue == 3072? styles.buttonrightactive : styles.buttonright ?? ""}`} size="sm" value={3072} bsPrefix='ia'>{"Thorough"}</Button>
                    ~~~~~~

This is ResponseLengthButtonGroup where I am getting this error:

import { Button, ButtonGroup } from "react-bootstrap";
import { Label } from "@fluentui/react";

import styles from "./ResponseLengthButtonGroup.module.css";

interface Props {
    className?: string;
    onClick: (_ev: any) => void;
    defaultValue?: number;
}

export const ResponseLengthButtonGroup = ({ className, onClick, defaultValue }: Props) => {
    return (
        <div className={`${styles.container} ${className ?? ""}`}>
            <Label>Response length:</Label>
            <ButtonGroup className={`${styles.buttongroup ?? ""}`} onClick={onClick}>
                <Button id="Succinct" className={`${defaultValue == 1024? styles.buttonleftactive : styles.buttonleft ?? ""}`} size="sm" value={1024} bsPrefix='ia'>{"Succinct"}</Button>
                <Button id="Standard" className={`${defaultValue == 2048? styles.buttonmiddleactive : styles.buttonmiddle ?? ""}`} size="sm" value={2048} bsPrefix='ia'>{"Standard"}</Button>
                <Button id="Thorough" className={`${defaultValue == 3072? styles.buttonrightactive : styles.buttonright ?? ""}`} size="sm" value={3072} bsPrefix='ia'>{"Thorough"}</Button>
            </ButtonGroup>
        </div>
    );
};

Below is my package.json:

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "watch": "tsc && vite build --watch"
  },
  "dependencies": {
    "@fluentui/react": "^8.110.7",
    "@fluentui/react-icons": "^2.0.195",
    "@react-spring/web": "^9.7.1",
    "dompurify": "^3.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1",
    "@azure/storage-blob": "^12.13.0",
    "classnames": "^2.3.1",
    "nanoid": "3.3.4",
    "prop-types": "15.8.1",
    "react-bootstrap": "^2.7.4"
  },
  "devDependencies": {
    "@types/dompurify": "^2.4.0",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^4.2.1",
    "prettier": "^2.8.3",
    "typescript": "^4.9.3",
    "vite": "^5.0.10",
    "postcss-nesting": "^11.2.2"
  }
}

Please help me out if I am doing something wrong.

Tags:

3

Answers


  1. 0

    Add in Props children: ReactNode

    Login or Signup to reply.
  2. 0 
    interface Props {
className?: string;
onClick: (_ev: any) => void;
defaultValue?: number, 
children?: ReactNode

    }

    Login or Signup to reply.
  3. 0

    Returning ReactNode from a React component requires the JSX.ElementType type. Support for ElementType was added in TypeScript 5.1 (release notes). This type was implemented in @types/react 18.2.7.

    ReactNode is the correct return type for React components. You need to make sure your dependencies are not too out of date.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search