I have simple functional component like below.
import React, { useState } from 'react';
import { connect } from 'react-redux';
import JoinRoomInputs from '../../../components/JoinRoomPage/JoinRoomInputs/JoinRoomInputs';
import { State } from '../../../store/states/states';
interface Props {
isRoomHost: boolean;
}
const JoinRoomContent = ({ isRoomHost }:Props) => {
const [roomIdValue, setRoomIdValue] = useState('');
const [nameValue, setNameValue] = useState('');
return (
<>
<JoinRoomInputs roomIdValue={roomIdValue} setRoomIdValue={setRoomIdValue} nameValue={nameValue} setNameValue={setNameValue} isRoomHost={isRoomHost} />
</>
);
};
const mapStateToProps = (state:State) => {
return {
...state
}
}
export default connect(mapStateToProps)(JoinRoomContent);
as you can see I have used useState hook in two lines.
But I'm getting yellow warning saying this.
src\components\JoinRoomPage\JoinRoomContent\JoinRoomContent.tsx
Line 1:17: 'useState' is defined but never used #typescript-eslint/no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
And what is more curious is line 17 is this );
This doesn't make any sense to me.
What am I doing wrong here ?
below is my package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.6.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.20.36",
"#types/react": "^16.14.20",
"#types/react-dom": "^16.9.14",
"#types/react-redux": "^7.1.20",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.6"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"typescript-plugin-css-modules": "^3.4.0"
}
}
Restart your server or kill the port with the following command:
sudo kill $(sudo lsof -t -i:PORT)
Related
I want to test a hook that uses states in its implementation, but each time I run my tests I get this error:
Error: Uncaught [Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.]
The hook is complex and I couldn't find which part may cause an issue (plus it works perfectly fine under real conditions, when running the application with npm start).
I tried to write a dummy test to see if I could figure out anything, and I found that updating a state (which I do in my hook) triggers the error.
Basically, this fails:
import { renderHook } from "#testing-library/react";
import React from "react";
it("foo test", () => {
const { result } = renderHook(() => {
const [foo, setFoo] = React.useState("foo");
setFoo("bar"); // This line is the culprit
return foo;
});
expect(result.current).toEqual("bar");
});
But this works:
import { renderHook } from "#testing-library/react";
import React from "react";
it("foo test", () => {
const { result } = renderHook(() => {
const [foo, setFoo] = React.useState("foo");
return foo;
});
expect(result.current).toEqual("foo");
});
What is the reason for this error and how can I fix it ?
Also, my package.json file:
{
"name": "agora-front",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.9.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"i18next": "^21.8.16",
"i18next-browser-languagedetector": "^6.1.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^11.18.3",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "BROWSER=none react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --verbose",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/preset-typescript": "^7.18.6",
"#types/jest": "^28.1.6",
"jest": "^28.1.3",
"prettier": "2.7.1",
"react-test-renderer": "^18.2.0"
}
}
I got tricked by the test environment and forgot React basic good practices.
Every state update should be wrapped in a condition with useEffect, otherwise render will trigger endlessly.
I followed that practice in all my React components, thus explaining why it was working fine when building the application. But I wrote my tests a bit quickly.
For my quick example, this is the correct way to do it:
import { renderHook } from "#testing-library/react";
import React from "react";
it("foo test", () => {
const { result } = renderHook(() => {
const [foo, setFoo] = React.useState("foo");
React.useEffect(() => {
setFoo("bar"); // Now it works.
}, [])
return foo;
});
expect(result.current).toEqual("bar");
});
Getting a typescript error when defining any type of simple react functional component with any number of props, including using FC, ComponentWithChildren etc...
Here's a minimal reproduction
type Props = {
className?: string;
};
const Horizontal: Props = ({ className = undefined }) => (
<div />
);
Gives me the error
Type '({ className }: { className?: undefined; }) => Element' has no properties in common with type 'Props'.ts(2559)
I don't understand this is how i always defined components. Is there something new in typescript that i don't know about?
{
"name": "call-mvp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"#types/classnames": "^2.3.1",
"#types/jest": "^27.5.1",
"#types/node": "^16.11.36",
"#types/react": "^18.0.9",
"#types/react-dom": "^18.0.4",
"#types/react-measure": "^2.0.8",
"#types/react-router-dom": "^5.3.3",
"#types/styled-components": "^5.1.25",
"classnames": "^2.3.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-measure": "^2.5.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"typescript": "^4.6.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
you can change it to:
const Horizontal: FC = ({ className = undefined } : Props)
This should work :
const Horizontal = ({ className = undefined } : Props) => ....
I'm using the Header comp from Semantic-ui like this, and I'm having this error for some components, not only Header. All of the components are imported but some of them are not working.
import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import { Header, HeaderContent, List, ListList } from 'semantic-ui-react';
function App() {
const [activities, setActivities]=useState([]);
useEffect(()=>{
axios.get('http://localhost:5000/api/Activites').then(response =>{
console.log(response);
setActivities(response.data);
})
},[])
return (
<div>
<HeaderContent as='h2' icon='users' content='Reactivites' ></HeaderContent>
<ListList>
{activities.map((activity: any)=>(
<List.Item key={activity.id}>
{activity.title}
</List.Item>
))}
</ListList>
</div>
);
}
export default App;
I am using typescript on my react project and semantic-ui for styling
My package.json looks like this, and if its needed to change version of some dependencies give me suggestions on the comments
{
"name": "client-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.1",
"#types/node": "^16.11.31",
"#types/react": "^18.0.8",
"#types/react-dom": "^18.0.0",
"axios": "^0.27.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.1",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.2",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "semantic-ui-css-patch"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I know 100% that the error its from the semantic-ui and I would appreciate so much for some help and thank you in forward
I'm new to TypeScript and its my first time using semantic-ui
I try to make typescript react setting
and then just install antd
$ yarn add antd
and fix app.tsx like this
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Switch } from "antd";
function App() {
function onChange(checked: any) {
console.log(`switch to ${checked}`);
}
return (
<div className="App">
<Switch defaultChecked onChange={onChange} />
</div>
);
}
export default App;
but i can't see right switch
https://i.stack.imgur.com/rmGjJ.png
i want to look like this
https://i.stack.imgur.com/xKVWW.png
and this is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.7.13",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"antd": "^4.18.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
How to solve this rendering problem?
I am building a component library, and install it as a local package, but it throws an error when I use react Hooks.
import React from "react";
import { useSelector } from "react-redux";
export default function Info() {
const name = useSelector((state) => state.account.name);
return (
<>
<ul>
<li>name: {name}</li>
</ul>
</>
);
}
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Then I upload this component library to remote, install it again, it solved.
But I still didn't know why...
Could anyone explain it?
My package.json
{
"name": "package",
"version": "0.1.0",
"private": true,
"main": "dist/index.js",
"babel": {
"presets": [
[
"react-app"
]
]
},
"dependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"compile": "rm -rf dist && mkdir dist && cross-env NODE_ENV=development babel ./src/components -d dist --copy-files"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.12.0",
"cross-env": "^7.0.2",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "3.4.3",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2"
},
}
Is there any difference behavior between the local package and remote package?
I read many articles, I guess it might be the multiple instances of React.
But why remote package wouldn't have this problem?
Articles I read:
Hooks + multiple instances of React #13991
Invalid Hook Call Warning
remove the brackets
const name = useSelector(state => state.account.name);
Add curly braces, and remove name in the end.. as you are trying to destructure the state.
const { name } = useSelector((state) => state.account);