OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Tauheed Ahmad
  • Start date Start date
T

Tauheed Ahmad

Guest
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:

Code:
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:

Code:
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:

Code:
{
  "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.

<p>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:</p>
<pre><code>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>
~~~~~~
</code></pre>
<p>This is ResponseLengthButtonGroup where I am getting this error:</p>
<pre><code>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>
);
};
</code></pre>
<p>Below is my package.json:</p>
<pre><code>{
"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"
}
}
</code></pre>
<p>Please help me out if I am doing something wrong.</p>
 

Latest posts

M
Replies
0
Views
1
Mohit Pant
M
Top