Develop Reference

How Can I Test an Imported Function With Jest

I have a React app, and I'm trying to build out some unit tests.
I got most of this test working, but I still can't figure out how to test one line using jest. I can't tell if it's because of the package I imported or if I'm doing something else incorrectly.
LogOutForDisagreement.js
import React from 'react';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import ClipboardClip from './../ClipboardClip';
const store = require('store2');
function LogOutForDisagreement(props) {
const handleClick = (e) => {
e.preventDefault();
props.onChange(
props.props.user = {
loggedIn: false,
email: '',
password: '',
firstName: ''
},
);
store.clearAll();
//sessionStorage.clear();
};
return (
<div id="logOutForDisagreementClipboard" className={props.className}>
<Form className="form">
<ClipboardClip />
<div className="centeredPaper">
<p>Sorry, you must agree to our privacy policy to access the site. You must now log out and log back in to agree to the terms.</p>
<Button id="logOutForDisagreement" type="" onClick={handleClick}>
Log Out
</Button>
</div>
</Form>
</div>
);
}
export default LogOutForDisagreement;
LogOutForDisagreement.test.js
import React from 'react';
import { render, fireEvent, cleanup } from '#testing-library/react';
import toJson from 'enzyme-to-json';
import LogOutForDisagreement from './LogOutForDisagreement';
const store = require('store2');
let props = {
props:
{
user: {
loggedIn: false,
email: 'email#example.com',
password: '0cc3dd4ad221f83270f876908064fa67d43407aa4bd580731b30c58c4fe2d8de00464107e5a143594068461af21ece9fb542e2f254b6f895eea6a6627f4f7c438a42fb18af7f539c4be2456661a5beec4a561f9443988182445b3952a5d9321a2d725b24b151f79a2806432c848b0b0c02576676e3a5c6f0661b4e318ca4f3e134d066808fab8fdd5322ed5cf5ad68aae43254a8fefdb69809c1bfdc07fe0365f38baa424d0c059c3a9fbff1f3525dae410740b9719929ef3f34235da519591f0410a08438132600fa802079b8d6f372f6dc439eb1b100aed28bb55cc3c6dc8982644940bd506278943fa8e430836cb874283e9f4438aac04a817f86bd1606036f03d196a211bdd91ac683d4ec63fcd503aa97b53d5c2571d39855b2be5f77be80a7f767271c8789aec26c66530c22387007c704f96b1a76a47e8e13fb263a0a6b24b2959495d34b47e03bcb95e8af13b555c5c403ec01427182afa1bae35ff81224b051fde7a61bd9044ed74042444a05e06186eedacc38c0128ff7d70c',
firstName: 'FirstName'
},
className: "logOutForDisagreement"
}
};
//You don't need the props for everything, just the className, but I'm leaving them here for now.
describe('Test the log out for disagreement button', () => {
it('renders correctly enzyme and has onclick', async () => {
console.log("This is the store at the begining after initial load: {" + Object.entries(sessionStorage).map(([key, val] = sessionItem) => {
return `${key}: ${val}`}) + "}");
const { getByText } = render(<LogOutForDisagreement id="logOutForDisagreementClipboard" className={props.className} />);
const spy = jest.spyOn(store, 'clearAll');
await fireEvent.click(getByText("Log Out"));
console.log("This is in the store after the event fires: {" + Object.entries(sessionStorage).map(([key, val] = sessionItem) => {
return `${key}: ${val}`}) + "}");
expect(spy).toHaveBeenCalled();
expect(toJson(getByText)).toMatchSnapshot();
//spy.mockRestore();
});
});
I still get an error that says the following:
Test the log out for disagreement button › renders correctly enzyme and has onclick
expect(jest.fn()).toHaveBeenCalled()
Expected number of calls: >= 1
Received number of calls: 0
37 | return `${key}: ${val}`}) + "}");
38 |
> 39 | expect(spy).toHaveBeenCalled();
| ^
40 |
41 | expect(toJson(getByText)).toMatchSnapshot();
42 | //spy.mockRestore();
...
--------------------------------------------|---------|----------|---------|---------|----------------------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
--------------------------------------------|---------|----------|---------|---------|--------------------
...
LogOutForDisagreement.js | 83.33 | 100 | 100 | 83.33 | 19
I'm just missing one line. Does anyone know how to get 100% test coverage on this? I know this is picky, but I use this same package in a lot of places.

I'm just posting the answer for anyone who runs into a similar issue. I used a tutorial from youtube.com that also used a third party library (axios) and mocked the built in axios functions: https://www.youtube.com/watch?v=gA-uNj2FgdM. I also had to pass the props down to the component and include onChange in the component, but now I have 100% test coverage.
LogOutForDisagreement.test.js
import React from 'react';
import { render, fireEvent, cleanup, screen } from '#testing-library/react';
import toJson from 'enzyme-to-json';
import LogOutForDisagreement from './LogOutForDisagreement';
import mockStore from 'store2';
jest.mock('store2');
mockStore.clearAll(() => Promise.resolve({}));
let props = {
props:
{
user: {
loggedIn: false,
email: 'email#example.com',
password:'0cc3dd4ad221f83270f876908064fa67d43407aa4bd580731b30c58c4fe2d8de00464107e5a143594068461af21ece9fb542e2f254b6f895eea6a6627f4f7c438a42fb18af7f539c4be2456661a5beec4a561f9443988182445b3952a5d9321a2d725b24b151f79a2806432c848b0b0c02576676e3a5c6f0661b4e318ca4f3e134d066808fab8fdd5322ed5cf5ad68aae43254a8fefdb69809c1bfdc07fe0365f38baa424d0c059c3a9fbff1f3525dae410740b9719929ef3f34235da519591f0410a08438132600fa802079b8d6f372f6dc439eb1b100aed28bb55cc3c6dc8982644940bd506278943fa8e430836cb874283e9f4438aac04a817f86bd1606036f03d196a211bdd91ac683d4ec63fcd503aa97b53d5c2571d39855b2be5f77be80a7f767271c8789aec26c66530c22387007c704f96b1a76a47e8e13fb263a0a6b24b2959495d34b47e03bcb95e8af13b555c5c403ec01427182afa1bae35ff81224b051fde7a61bd9044ed74042444a05e06186eedacc38c0128ff7d70c',
firstName: 'FirstName'
},
className: "logOutForDisagreement"
}
};
//You don't need the props for everything, just the className, but I'm leaving them h
describe('Test the log out for disagreement button', () => {
it('renders correctly enzyme and has onclick', async () => {
const { getByText } = render(<LogOutForDisagreement id="logOutForDisagreementClipboard" className={props.className} props={props} onChange={jest.fn()} />);
fireEvent.click(screen.getByRole('button', {
name: /log out/i
}));
//await expect(spy).toHaveBeenCalled();
expect(mockStore.clearAll).toHaveBeenCalledTimes(1);
expect(toJson(getByText)).toMatchSnapshot();
});
});
Code Coverage
--------------------------------------------|---------|----------|---------|---------|----------------------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
--------------------------------------------|---------|----------|---------|---------|----------------------------------
All files | 25.95 | 8.06 | 18.94 | 26.33 |
src/components/privacyPolicyComponents | 25 | 0 | 21.05 | 25 |
LogOutForDisagreement.js | 100 | 100 | 100 | 100 |
Does anyone know why it reports that I called the function twice now? Should I just use toHaveBeenCalled? I still get an error that it got called twice.
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 2

React Data Grid (adazzle) : TypeError: Cannot read property 'length' of undefined

I am new to React and I am using adazzle's React Data Grid to create an editable grid in my React application. My code below compiles successfully but when I try to run it on http://localhost:3000, it gives me the error: "TypeError: Cannot read property 'length' of undefined". Please help as I cannot see where I use the length property in my code.
index.js
import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import "./styles.css";
const columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true },
{ key: "complete", name: "Complete", editable: true }
];
const rows = [
{ id: 0, title: "Task 1", complete: 20 },
{ id: 1, title: "Task 2", complete: 40 },
{ id: 2, title: "Task 3", complete: 60 }
];
class Example extends React.Component {
state = { rows };
onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
this.setState(state => {
const rows = state.rows.slice();
for (let i = fromRow; i <= toRow; i++) {
rows[i] = { ...rows[i], ...updated };
}
return { rows };
});
};
render() {
return (
<ReactDataGrid
//rows={rows] //uncomment this line and the grid appears successfully but cannot be edited(?)
columns={columns}
rowGetter={i => this.state.rows[i]}
rowsCount={3}
onGridRowsUpdated={this.onGridRowsUpdated}
enableCellSelect={true}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);
UPDATE
Here is the error message in detail:
TypeError: Cannot read property 'length' of undefined
(anonymous function)
C:/kilostep_material/src/hooks/useViewportRows.ts:31
28 | expandedGroupIds
29 | }: ViewportRowsArgs<R>) {
30 | const [groupedRows, rowsCount] = useMemo(() => {
> 31 | if (groupBy.length === 0 || !rowGrouper) return [undefined, rawRows.length];
32 |
33 | const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[], startRowIndex: number): [GroupByDictionary<R>, number] => {
34 | let groupRowsCount = 0;
View compiled
▼ 3 stack frames were expanded.
mountMemo
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:15846
useMemo
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:16219
useMemo
C:/kilostep_material/kilostep/node_modules/react/cjs/react.development.js:1532
▲ 3 stack frames were expanded.
useViewportRows
C:/kilostep_material/src/hooks/useViewportRows.ts:30
27 | rowGrouper,
28 | expandedGroupIds
29 | }: ViewportRowsArgs<R>) {
> 30 | const [groupedRows, rowsCount] = useMemo(() => {
31 | if (groupBy.length === 0 || !rowGrouper) return [undefined, rawRows.length];
32 |
33 | const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[], startRowIndex: number): [GroupByDictionary<R>, number] => {
View compiled
DataGrid
C:/kilostep_material/src/DataGrid.tsx:268
265 | rawGroupBy: rowGrouper ? rawGroupBy : undefined
266 | });
267 |
> 268 | const { rowOverscanStartIdx, rowOverscanEndIdx, rows, rowsCount, isGroupRow } = useViewportRows({
| ^ 269 | rawRows,
270 | groupBy,
271 | rowGrouper,
View compiled
▼ 17 stack frames were expanded.
renderWithHooks
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:14985
updateForwardRef
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:17044
beginWork
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:19098
HTMLUnknownElement.callCallback
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:3945
invokeGuardedCallbackDev
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:3994
invokeGuardedCallback
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:4056
beginWork$1
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:23964
performUnitOfWork
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:22776
workLoopSync
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:22707
renderRootSync
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:22670
performSyncWorkOnRoot
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:22293
scheduleUpdateOnFiber
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:21881
updateContainer
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:25482
(anonymous function)
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:26021
unbatchedUpdates
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:22431
legacyRenderSubtreeIntoContainer
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:26020
render
C:/kilostep_material/kilostep/node_modules/react-dom/cjs/react-dom.development.js:26103
▲ 17 stack frames were expanded.
Module.<anonymous>
C:/kilostep_material/kilostep/src/index.js:44
41 | }
42 |
43 | const rootElement = document.getElementById("root");
> 44 | ReactDOM.render(<Example />, rootElement);
45 |
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:203:30
__webpack_require__
C:/kilostep_material/kilostep/webpack/bootstrap:851
848 |
849 | __webpack_require__.$Refresh$.init();
850 | try {
> 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 852 | } finally {
853 | __webpack_require__.$Refresh$.cleanup(moduleId);
854 | }
View compiled
fn
C:/kilostep_material/kilostep/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:309:18
__webpack_require__
C:/kilostep_material/kilostep/webpack/bootstrap:851
848 |
849 | __webpack_require__.$Refresh$.init();
850 | try {
> 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 852 | } finally {
853 | __webpack_require__.$Refresh$.cleanup(moduleId);
854 | }
View compiled
checkDeferredModules
C:/kilostep_material/kilostep/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
C:/kilostep_material/kilostep/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:69
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

I finally got the React Data Grid to run and be editable as in the example sandbox code by uninstalling the 7.0.1 version and installing the 5.0.1 version which was the one in use by the sandbox (although there are other sandboxes with earlier versions e.g. 3.0.2 which also works).
I typed the following commands:
npm uninstall react-data-grid
npm install react-data-grid#5.0.1
Or with yarn:
yarn remove react-data-grid
yarn add react-data-grid#5.0.1

Invalid hook call reactjs

Every time I try to render the page, this error is thrown. I tried multiple solutions but none of them worked.
Current react version is 17.0.2, node version is 14.16.1
Here the important code snippets:
import { useAuthUser, useFeatureFlags, useUser, useClaim, firebase } from './lib'
import React from 'react'
...
function App () {
console.log(React.version)
const [flags, flagsLoading] = useFeatureFlags() // last executed line here
...
import useCollection from './useCollection'
const useFeatureFlags = () => {
const [flagData, , loading, error] = useCollection('featureFlags') // last executed line here
...
}
export default useFeatureFlags
import { useState, useEffect } from 'react'
import { db } from '../firebase'
const useCollection = (path) => {
const [loading, setLoading] = useState(true) // here, the error is thrown
...
}
export default useCollection
I am not the author of this project, but I have to get this web app running.
Thanks for your help!
EDIT:
Here is the Stack trace and error
Error: Invalid hook call. Hooks can only be called inside of the body of a function
component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
resolveDispatcher
node_modules/react/cjs/react.development.js:1476
useState
node_modules/react/cjs/react.development.js:1507
useCollection
project/lib/build/hooks/useCollection.js:18
15 | * #returns [collectionDocuments, querySnapshot, loading, error]
16 | */
17 | const useCollection = path => {
> 18 | const [loading, setLoading] = (0, _react.useState)(true);
19 | const [ref, setRef] = (0, _react.useState)(null);
20 | const [querySnapshot, setQuerySnapshot] = (0, _react.useState)(null);
21 | const [collectionDocuments, setCollectionDocuments] = (0, _react.useState)([]);
useFeatureFlags
project/lib/build/hooks/useFeatureFlags.js:20
17 | * randomly determined rollout percentage.
18 | */
19 | const useFeatureFlags = () => {
> 20 | const [flagData,, loading, error] = (0, _useCollection.default)('featureFlags'); // const test = <useCollection path='featureFlags' />
21 | // console.log(test)
22 |
23 | const output = {};
App
src/App.js:43
40 |
41 | function App () {
42 | console.log(React.version)
> 43 | const [flags, flagsLoading] = useFeatureFlags()
44 | const [authUser, authUserLoading] = useAuthUser()
45 | const [user, userLoading] = useUser()
46 | const [claim, claimLoading] = useClaim()
./src/index.js/<
src/index.js:23
20 |
21 | console.log('project id', process.env.REACT_APP_FIREBASE_PROJECT_ID)
22 |
> 23 | ReactDOM.render(<App />, document.getElementById('root'))
24 |
./src/index.js
http://localhost:3000/static/js/main.chunk.js:24779:30
__webpack_require__
project/web/webpack/bootstrap:851
848 |
849 | __webpack_require__.$Refresh$.init();
850 | try {
> 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 852 | } finally {
853 | __webpack_require__.$Refresh$.cleanup(moduleId);
854 | }
fn
project/web/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
1
http://localhost:3000/static/js/main.chunk.js:35286:18
__webpack_require__
project/web/webpack/bootstrap:851
848 |
849 | __webpack_require__.$Refresh$.init();
850 | try {
> 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 852 | } finally {
853 | __webpack_require__.$Refresh$.cleanup(moduleId);
854 | }
checkDeferredModules
project/web/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
webpackJsonpCallback
project/web/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:81

In your second and third code snippet, add
import React from "react"

Vue 2 Typescript error: 'No overload matches this call' and 'Property does not exist'

I need to use Typescript for the first time and it's in a Vue 2 project. I'm trying to write a simple Login component (actually it's in views) and I get a few type errors that I can't find a solution for.
(Actually the type errors don't prevent it from running on localhost (everything seems to work fine) but I can't host it the website because I can't run 'npm run build' as it won't finish with the errors.)
Would really appreciate any help!
Login.vue
<template>
<div>
<div class="wrapper">
<div class="form">
<h1 class="title">Login</h1>
<div class="tile is-vertical is-8">
<b-field label="Email">
<b-input type="email" icon="email" v-model="email"/>
</b-field>
<b-field label="Password">
<b-input icon="lock" type="Password" password-reveal v-model="password" validation-message="Succeeded!"/>
</b-field>
<b-message type="is-danger" v-if="error">
{{ error }}
</b-message>
<b-button class="is-primary login-button" #click="login">Login</b-button>
</div>
<GoogleLogin />
<div class="register-wrapper">
<p>Don't have an account yet? <router-link :to="{path: '/register'}"> Register here</router-link></p>
</div>
</div>
</div>
<Footer/>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import GoogleLogin from "#/components/GoogleLogin.vue";
import Footer from "#/components/Footer.vue";
import firebase from "firebase/app";
import "firebase/auth";
import { mapGetters } from "vuex";
export default Vue.extend({
components: {
GoogleLogin,
Footer
},
computed: {
...mapGetters(["user"]),
nextRoute() {
return this.$route.query.redirect || "/profile";
}
},
data() {
return {
email: '',
password: '',
error: ''
}
},
watch: {
user(auth) {
if (auth) {
this.$router.replace(this.nextRoute);
}
}
},
methods: {
login() {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.catch(err => this.error = err)
},
loginGoogle() {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
},
},
})
</script>
Errors
ERROR /src/views/Login.vue(62,32):
62:32 No overload matches this call.
Overload 1 of 2, '(location: RawLocation): Promise<Route>', gave the following error.
Argument of type 'unknown' is not assignable to parameter of type 'RawLocation'.
Type 'unknown' is not assignable to type 'Location'.
Overload 2 of 2, '(location: RawLocation, onComplete?: Function | undefined, onAbort?: ErrorHandler | undefined): void', gave the following error.
Argument of type 'unknown' is not assignable to parameter of type 'RawLocation'.
Type 'unknown' is not assignable to type 'Location'.
60 | user(auth) {
61 | if (auth) {
> 62 | this.$router.replace(this.nextRoute);
| ^
63 | }
64 | }
65 | },
ERROR in /src/views/Login.vue(68,59):
68:59 Property 'email' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { nextRoute: unknown; user: any; }, Readonly<Record<never, any>>>'.
66 | methods: {
67 | login() {
> 68 | firebase.auth().signInWithEmailAndPassword(this.email, this.password)
| ^
69 | .catch(err => this.error = err)
70 | },
71 | loginGoogle() {
ERROR in /src/views/Login.vue(68,71):
68:71 Property 'password' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { nextRoute: unknown; user: any; }, Readonly<Record<never, any>>>'.
66 | methods: {
67 | login() {
> 68 | firebase.auth().signInWithEmailAndPassword(this.email, this.password)
| ^
69 | .catch(err => this.error = err)
70 | },
71 | loginGoogle() {
ERROR in /src/views/Login.vue(69,32):
69:32 Property 'error' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { nextRoute: unknown; user: any; }, Readonly<Record<never, any>>>'.
67 | login() {
68 | firebase.auth().signInWithEmailAndPassword(this.email, this.password)
> 69 | .catch(err => this.error = err)
| ^
70 | },
71 | loginGoogle() {
72 | const provider = new firebase.auth.GoogleAuthProvider();

Index.js Error: UserForm(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Hi I am fairly new to react . I am fairly new to react and I am trying add a row in my react app on the click of a button. I followed this link How to add and remove table rows Dynamically in React.js
to do so but I am not able to translate it to my code.
I am getting this error.
Error: UserForm(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Module../src/index.js
D:/react_bpms1/src/index.js:7
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
> 7 | ReactDOM.render(
8 | <React.StrictMode>
9 | <App />
10 | </React.StrictMode>,
View compiled
__webpack_require__
D:/react_bpms1/webpack/bootstrap:784
781 | };
782 |
783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 785 |
786 | // Flag the module as loaded
787 | module.l = true;
View compiled
fn
D:/react_bpms1/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:2076:18
__webpack_require__
D:/react_bpms1/webpack/bootstrap:784
781 | };
782 |
783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 785 |
786 | // Flag the module as loaded
787 | module.l = true;
View compiled
checkDeferredModules
D:/react_bpms1/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
D:/react_bpms1/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:75
Here is my code:
My code here: KPIDetails.js Here I am rendering the view in KPI Details.js file.
<MuiThemeProvider>
<React.Fragment>
<Grid container>
<Grid item xs={6} direction="row" alignItems="center">
<table className="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th className="text-center"> KPI</th>
<th className="text-center"> UOM</th>
<th className="text-center"> Base</th>
<th className="text-center"> Target</th>
<th className="text-center"> Target Date</th>
</tr>
</thead>
<tbody>
{this.state.rows.map((item, idx) => (
<tr id="addr0" key={idx}>
<td>{idx}</td>
<td>
<input
type="text"
name="Kpi_Before"
value={this.state.rows[idx].Kpi_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="UOM_Before"
value={this.state.rows[idx].UOM_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="Base_Before"
value={this.state.rows[idx].Base_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="Target_Before"
value={this.state.rows[idx].Target_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="Target_Before"
value={this.state.rows[idx].dateTime}
onChange={this.handleChangeRows(idx)}
className="form-control"
/>
</td>
</tr>
))}
</tbody>
</table>
<button
onClick={this.handleRemoveRow}
className="pull-right btn btn-default"
>
Delete Row
</button>
<Button
variant="outlined"
color="primary"
onClick={this.handleAddRow}
size="small"
style={styles.button}
>
+
</Button>
</Grid>
</Grid>
</React.Fragment>
</MuiThemeProvider>;
Here is my code for UserFormjs where I write all the functions:
export class UserForm extends Component {
state = {
step: 1,
Title: "",
Details: "",
What: "",
Why: "",
How: "",
Status: "",
Cost: "",
Benefits: "",
Kpi_Before: "",
Kpi_After: "",
Time: "",
UOM_Before: "",
Base_Before: "",
Target_Before: "",
dateTime: null,
rows: []
};
//1
handleChangeRows = idx => e => {
const { Kpi_Before, value } = e.target;
const rows = [...this.state.rows];
rows[idx] = {
[Kpi_Before]: value
};
this.setState({
rows
});
};
//2
handleAddRow = () => {
const item = {
KPI_Before: "",
UOM_Before: "",
Base_Before: "",
Target_Before: "",
dateTime: ""
};
this.setState({
rows: [...this.state.rows, item]
});
};
//3
handleRemoveRow = () => {
this.setState({
rows: this.state.rows.slice(0, -1)
});
};
}
This is index.js:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
I don't understand this error. Also is there another way to do this? Achieve creating a table row on the click of a button?

class UserForm extends React.Component {
state = {
step: 1
}
render() {
const { step } = this.state;
switch (step) {
case 1:
return (
<h1>Step: case1</h1>
);
case 2:
return (
<h1>step: case2</h1>
);
}
}
}
I have tried this basic code, this is working fine with switch case. you can also try.It seems that problem is with FormUserDetails component.
Can you post code for that?

Removed a constructor which was causing the problem and it solved the issue