props is undefined inside React component - reactjs

I'm trying to clone my Main component's prop to all it's children. I'm using cloneElement but I get an error stating "props is undefined".
It seem's others are having the same issue (https://github.com/wesbos/Learn-Redux-Starter-Files/issues/6)
This is the code for my main component:
import React from 'react';
import Nav from './Nav';
const Main = React.createClass({
render() {
return (
<div className="wrapper">
<Nav />
{React.cloneElement(this.props.children, { ...this.props, children: props.children.props.children })}
</div>
)
}
});
export default Main;
Here are my dependency versions:
"devDependencies": {
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-react-display-name": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"express": "^4.13.4",
"node-sass": "^3.4.2",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.2.6",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
},
"dependencies": {
"bulma": "0.0.18",
"classnames": "^2.2.3",
"react": "^15.1.0",
"react-addons-css-transition-group": "^15.0.1",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"react-router-redux": "^4.0.4",
"redux": "^3.5.2",
"shuffle-array": "^1.0.0"
}

You just have to give your cloned the props like this
{React.cloneElement(this.props.children, this.props)}
Take into account that cloneElement is only working if you give ONE node to main children. If many do a loop like explained in the documentation

Related

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'modal')

I'm trying to install #mui/x-date-pickers to my project and I followed the instructions from their website, which you can find here. The problem is when i installed everything and added this code to my project
import React from 'react';
import { LocalizationProvider, TimePicker } from '#mui/x-date-pickers';
import { TextField } from '#mui/material';
import { AdapterMoment } from '#mui/x-date-pickers/AdapterMoment';
import moment from 'moment';
export const Blabla = () => {
const [value, setValue] = React.useState(moment('2014-08-18T21:11:54'));
const handleChange = (newValue: any) => {
setValue(newValue);
};
return (
<LocalizationProvider dateAdapter={AdapterMoment}>
<TimePicker
label="Time"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
};
I am getting this error
And this is how my dependencies look like in the package.json file
"dependencies": {
"#mui/x-date-pickers": "^5.0.11",
"auth0-js": "^9.13.2",
"axios": "^0.19.2",
"copy-webpack-plugin": "6",
"crossfilter": "^1.3.12",
"crossfilter2": "^1.5.4",
"cubejs": "^1.3.2",
"d3": "^6.2.0",
"dataloader": "^2.0.0",
"date-fns": "^2.14.0",
"emotion": "^10.0.27",
"emotion-theming": "^10.0.27",
"highcharts": "8.1.2",
"highcharts-custom-events": "3.0.9",
"highcharts-react-official": "3.0.0",
"html-to-image": "^1.10.8",
"i18next": "^19.4.4",
"js-sha256": "^0.9.0",
"json2mq": "^0.2.0",
"jspdf": "^2.5.1",
"jsverify": "^0.8.4",
"leaflet": "^1.7.1",
"mixpanel-browser": "2.41.0",
"moment": "^2.25.3",
"papaparse": "^5.3.0",
"patch-package": "^6.4.7",
"ramda": "^0.27.0",
"react": "^16.13.1",
"react-codemirror": "^1.0.0",
"react-copy-to-clipboard": "^5.0.2",
"react-csv": "^2.0.3",
"react-dates": "^21.8.0",
"react-datetime": "^3.0.4",
"react-dom": "^16.13.1",
"react-dropzone": "^12.0.1",
"react-email-editor": "^1.2.0",
"react-hot-loader": "^4.12.21",
"react-hot-toast": "^2.2.0",
"react-i18next": "^11.4.0",
"react-infinite-scroll-component": "^5.1.0",
"react-leaflet": "^2.7.0",
"react-material-ui-carousel": "^2.3.11",
"react-router-dom": "^5.2.0",
"react-slick": "^0.26.1",
"react-tooltip": "^4.2.11",
"rxjs": "^6.5.5",
"slick-carousel": "^1.8.1",
"topojson-client": "^3.1.0",
"urlencode": "^1.1.0",
"webpack": "^4.42.1"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-react-jsx": "^7.9.4",
"#babel/plugin-transform-runtime": "^7.9.0",
"#babel/preset-env": "^7.9.5",
"#babel/preset-typescript": "^7.9.0",
"#cubejs-client/core": "^0.25.0",
"#date-io/moment": "^2.16.1",
"#emotion/babel-plugin": "^11.7.2",
"#emotion/core": "10.1.1",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^10.0.27",
"#material-ui/core": "^4.9.11",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.53",
"#mui/material": "^5.11.1",
"#storybook/addon-actions": "^5.3.18",
"#storybook/addon-console": "^1.2.1",
"#storybook/addon-knobs": "^5.3.18",
"#storybook/addon-storyshots": "^5.3.18",
"#storybook/addon-viewport": "^5.3.18",
"#storybook/react": "^5.3.18",
"#svgr/webpack": "^5.3.1",
"#testing-library/jest-dom": "^5.5.0",
"#testing-library/react": "^10.0.4",
"#types/auth0-js": "^9.12.4",
"#types/d3": "^5.16.3",
"#types/geojson": "^7946.0.7",
"#types/jest": "25.2.1",
"#types/json2mq": "^0.2.0",
"#types/jspdf": "^1.3.3",
"#types/leaflet": "^1.5.17",
"#types/lodash": "4.14.151",
"#types/mixpanel-browser": "2.35.6",
"#types/node": "^17.0.17",
"#types/papaparse": "^5.2.5",
"#types/ramda": "0.27.6",
"#types/react": "^16.9.34",
"#types/react-codemirror": "^1.0.3",
"#types/react-copy-to-clipboard": "^4.3.0",
"#types/react-csv": "^1.1.1",
"#types/react-dates": "^17.1.10",
"#types/react-dom": "^16.9.6",
"#types/react-email-editor": "^1.1.1",
"#types/react-leaflet": "^2.5.2",
"#types/react-router-dom": "^5.1.5",
"#types/react-slick": "^0.23.4",
"#types/testing-library__react": "^10.0.1",
"#types/urlencode": "^1.1.2",
"#types/webpack-env": "^1.16.3",
"#typescript-eslint/eslint-plugin": "^5.33.1",
"#typescript-eslint/parser": "^5.33.1",
"autoprefixer": "^9.7.6",
"babel-eslint": "10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-emotion": "^10.0.33",
"babel-preset-react-app": "^9.1.2",
"css-loader": "^3.5.3",
"eslint": "7.1.0",
"eslint-config-prettier": "6.10.1",
"eslint-import-resolver-jest": "3.0.0",
"eslint-import-resolver-webpack": "0.12.1",
"eslint-plugin-import": "2.21.2",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "4.0.2",
"html-webpack-plugin": "^4.2.1",
"husky": "^7.0.4",
"jest": "25.2.1",
"jest-emotion": "^10.0.32",
"lint-staged": "^10.1.6",
"npx": "^10.2.2",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"react-test-renderer": "^16.13.1",
"storybook-addon-emotion-theme": "^2.1.1",
"storybook-addon-jsx": "^7.2.3",
"style-loader": "^1.2.1",
"ts-jest": "^25.4.0",
"typescript": "4.6",
"typescript-styled-plugin": "^0.15.0",
"url-loader": "^4.1.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
What am I doing wrong?

You may need an appropriate loader to handle this file type. | import History from '../../utils/History';

Am new to reactjs, and am working on a project built on "architectui-react-pro" ui.
The project is working good on my m1 macbook, but not working on my freelancers machines (Windows). I tried to load it on another intel based macbook and am getting this error.
Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type.
| import History from '../../utils/History';
| var Login = lazy(function () {
> return import("../../Pages/Login");
| });
|
Following is my package.json file:
"name": "architectui-react-pro",
"version": "1.6.1",
"private": true,
"description": "Financial Assistance - MHB",
"author": "MatrixSoftwares.com",
"homepage": "",
"repository": {
"type": "git",
"url": "git+https://github.com/dpackdev/architectui-react-pro"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#material-ui/core": "^4.11.4",
"#progress/kendo-react-pdf": "^4.7.0",
"#types/googlemaps": "^3.43.3",
"#types/markerclustererplus": "^2.1.33",
"#wojtekmaj/react-datetimerange-picker": "^2.3.0",
"animate-sass": "^0.8.2",
"apexcharts": "^3.27.1",
"aphrodite": "^2.4.0",
"availity-reactstrap-validation": "^2.7.1",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"chart.js": "^2.9.4",
"chartist": "^0.10.1",
"chroma-js": "^2.1.2",
"ckeditor4": "^4.16.1",
"ckeditor4-react": "^1.4.2",
"classnames": "^2.3.1",
"date-arithmetic": "^3.1.0",
"date-fns": "^1.30.1",
"dom-to-pdf": "^0.2.2",
"dropzone": "^5.9.2",
"fibers": "^4.0.2",
"globalize": "^1.4.2",
"google-map-react": "^1.1.5",
"hamburgers": "^0.8.1",
"html2canvas": "^1.0.0-rc.7",
"install": "^0.13.0",
"jquery": "^3.6.0",
"js-base64": "^3.7.2",
"js-md5": "^0.7.3",
"jspdf": "^2.3.1",
"jw-react-pagination": "^1.1.0",
"loaders.css": "^0.1.2",
"m-react-splitters": "^1.2.0",
"moment": "^2.24.0",
"namor": "^1.1.2",
"node-sass": "^4.13.0",
"number-to-words": "^1.2.4",
"pe7-icon": "^1.0.4",
"radium": "^0.26.0",
"rc-slider": "^8.7.1",
"rc-tabs": "^9.6.7",
"rc-tree": "^2.1.4",
"react": "^16.14.0",
"react-animations": "^1.0.0",
"react-anime": "^3.0.3",
"react-apexcharts": "^1.3.9",
"react-app-polyfill": "^1.0.4",
"react-big-calendar": "^0.20.4",
"react-bootstrap-sweetalert": "^4.4.1",
"react-bootstrap-table-next": "^3.2.0",
"react-bootstrap-table2-filter": "^1.2.0",
"react-bootstrap-typeahead": "^3.4.7",
"react-burgers": "^1.3.0",
"react-chartist": "^0.13.3",
"react-chartjs-2": "^2.11.2",
"react-circle": "^1.1.1",
"react-color": "^2.19.3",
"react-compound-slider": "^2.4.0",
"react-cookie": "^4.0.3",
"react-copy-to-clipboard": "^5.0.3",
"react-countup": "^4.2.2",
"react-cropper": "^1.3.0",
"react-datepicker": "^2.9.6",
"react-dates": "^20.3.0",
"react-dnd": "^7.7.0",
"react-dnd-html5-backend": "^7.7.0",
"react-dom": "^16.14.0",
"react-dropzone": "^10.1.9",
"react-flag-icon-css": "^1.0.25",
"react-flagkit": "^1.0.2",
"react-icons": "^3.8.0",
"react-image-crop": "^8.6.12",
"react-input-mask": "^2.0.4",
"react-js-pagination": "^3.0.2",
"react-ladda": "^6.0.0",
"react-liquid-gauge": "^1.2.4",
"react-loader": "^2.4.7",
"react-loader-advanced": "^1.7.1",
"react-loaders": "^3.0.1",
"react-loading-overlay": "^1.0.1",
"react-map-gl": "^5.3.16",
"react-metismenu": "^1.4.0",
"react-motion-drawer": "^3.1.0",
"react-nouislider": "^2.0.1",
"react-numeric-input": "^2.2.3",
"react-on-screen": "^2.1.1",
"react-pagify": "^2.4.0",
"react-paginate": "^6.3.0",
"react-pdf": "^5.3.0",
"react-perfect-scrollbar": "^1.5.3",
"react-popper": "^1.3.11",
"react-rating": "^1.7.2",
"react-redux": "^7.2.4",
"react-redux-form": "^1.16.14",
"react-resize-detector": "^4.2.1",
"react-responsive-tabs": "^3.3.0",
"react-router-dom": "^5.1.0",
"react-scripts": "3.0.0",
"react-scroll": "^1.8.2",
"react-select": "^2.4.4",
"react-simple-maps": "^0.12.1",
"react-sizeme": "^2.6.7",
"react-slick": "^0.26.1",
"react-sortable-tree": "^2.6.2",
"react-sortable-tree-theme-file-explorer": "^2.0.0",
"react-sparklines": "^1.7.0",
"react-sticky-el": "^1.0.20",
"react-stickynode": "^2.1.1",
"react-svg-gauge": "^1.0.10",
"react-sweet-progress": "^1.1.2",
"react-switch": "^4.1.0",
"react-syntax-highlighter": "^10.3.5",
"react-table": "^7.7.0",
"react-textarea-autosize": "^7.1.0",
"react-to-pdf": "0.0.14",
"react-toastify": "^5.4.0",
"react-transition-group": "^1.2.1",
"react-validation": "^3.0.7",
"react-vertical-timeline-component": "^2.5.0",
"react-visibility-sensor": "^5.1.1",
"react-widgets": "^4.6.1",
"react-widgets-globalize": "^5.0.23",
"react-widgets-moment": "^4.0.30",
"react-widgets-simple-number": "^4.1.26",
"reactour": "^1.18.4",
"reactstrap": "^8.9.0",
"recharts": "^1.8.5",
"redux": "^4.1.0",
"redux-form": "^8.3.7",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"rodal": "^1.6.3",
"sass": "^1.35.1",
"slick-carousel": "^1.8.1",
"styled-components": "^4.4.0",
"sweetalert": "2.1.2",
"sweetalert-react": "^0.4.11",
"sweetalert2": "^11.4.0",
"typescript": "^3.9.10",
"validator": "^12.1.0"
},
"scripts": {
"start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
"build": "SKIP_PREFLIGHT_CHECK=true react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"webpack": "^4.28.4"
}
}
And here is the code from "/src/Layout/AppMain/index.js"
import { Router, Route, Switch, Redirect, useLocation } from 'react-router-dom';
import React, { Suspense, lazy, Fragment, useEffect } from "react";
import Loader from "react-loaders";
import { ToastContainer } from "react-toastify";
import PrivateRoutes from '../../utils/PrivateRoute';
import History from '../../utils/History';
const Login = lazy(() => import("../../Pages/Login"));
const AppMain = () => {
const location = useLocation()
if(location.pathname === '/')
{
History.replace('/applicant/analytics')
return <Redirect to="/applicant/analytics"/>
}
const suspenseFallback = (
<div className="loader-container">
<div className="loader-container-inner">
<div className="text-center">
<Loader type="ball-pulse"/>
</div>
<h6 className="mt-3">
Please wait while we load all the Applications examples
<small>Because this is a demonstration we load at once all the Applications examples. This wouldn't happen in a real live app!</small>
</h6>
</div>
</div>
)
return (
<Fragment>
<Suspense fallback={suspenseFallback}>
<Router history={History}>
<Switch>
<Route path="/applicant/login" component={Login} exact/>
<Route path="/" component={PrivateRoutes} />
</Switch>
</Router>
</Suspense>
<ToastContainer/>
</Fragment>
)
};
export default AppMain;
Please help me with getting the project up and running. Thanks, Mustafa.

Link State Typescript Error: "state: { id: any; name: any; }; }' is not assignable to type "

I'm trying to pass state through a <Link />, which I have been able to do in the past without typescript. However typescript is throwing an error I'm not sure how to fix...
This is my packages I'm using...
"dependencies": {
"#material-ui/core": "^4.12.3",
"#mdi/js": "^6.2.95",
"#mdi/react": "^1.5.0",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"#types/lodash.debounce": "^4.0.6",
"#react-google-maps/api": "^2.2.0",
"#types/md5": "^2.3.1",
"axios": "^0.21.1",
"axios-auth-refresh": "^3.2.1",
"eslint-plugin-prettier": "^3.4.0",
"lodash.debounce": "^4.0.8",
"formik": "^2.2.9",
"geolib": "^3.3.1",
"http-proxy-middleware": "^2.0.1",
"md5": "^2.3.0",
"node-sass": "^6.0.1",
"papaparse": "^5.3.0",
"prettier": "^2.3.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-code-input": "^3.10.1",
"react-collapse": "^5.1.0",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-media": "^1.10.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.1.1",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"sass": "^1.37.5",
"sass-loader": "^12.1.0",
"web-vitals": "^1.1.2",
"yup": "^0.32.9"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/google.maps": "^3.45.6",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-collapse": "^5.0.1",
"#types/react-dom": "^17.0.0",
"#types/react-redux": "^7.1.18",
"#types/react-router-dom": "^5.1.8",
"#typescript-eslint/eslint-plugin": "4.0.1",
"#typescript-eslint/parser": "4.0.1",
"#types/redux": "^3.6.0",
"#types/redux-logger": "^3.0.9",
"#types/redux-thunk": "^2.1.0",
"eslint": "^7.3.1",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-jsdoc": "^28.6.1",
"typescript": "^3.9.6"
},
Based on the docs, it looks like you have to pass Link a to object containing all the information:
<Link
to={{
pathname: "/courses",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true }
}}
/>

react-infinite-scroll-component stopped working suddenly

So, I am having a very unusual issue. I am using the package react-infinite-scroll-component and it worked perfectly before and suddenly stopped working. I have not imported anything new on the page and have stopped working now. I remember it worked perfectly.
These are the imports on the page:
```
import React, { Component } from 'react';
import { Col, Row, Icon, Spin, Radio, Tabs ,Button, Pagination } from 'antd';
import Select, { SelectOption } from '../../../shared/components/uielements/select';
import Box from '../../../shared/components/utility/box';
import LayoutWrapper from '../../../shared/components/utility/layoutWrapper.js';
import Form from '../../../shared/components/uielements/form';
import ActiveProductionClass from './active_production';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { productionByStatus } from '../../actions/edit_production_actions';
// import { Button } from 'antd/lib/radio';
import _ from "lodash";
import InfiniteScroll from 'react-infinite-scroll-component';
```
This is my package.json file:
```
"dependencies": {
"antd": "^3.0.3",
"antd-local-icon": "^0.1.3",
"axios": "^0.18.0",
"azure-storage": "^2.8.2",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cluster": "^0.7.7",
"dnd-core": "^6.0.0",
"dns": "^0.2.2",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.3",
"fs": "0.0.1-security",
"google-map-react": "^1.0.0",
"history": "^4.7.2",
"html-to-draftjs": "^1.3.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^2.6.6",
"jquery": "^3.3.1",
"jspdf": "git://github.com/MrRio/jsPDF.git#76edb3387cda3d5292e212765134b06150030364",
"lodash.flow": "^3.5.0",
"net-cluster": "0.0.2",
"nprogress": "^0.2.0",
"nuka-carousel": "^4.2.1",
"password-validator": "^4.0.0",
"phantom-html-to-pdf": "^0.5.6",
"postcss-inline-rtl": "^0.9.8",
"prop-types": "^15.6.1",
"query-string": "^5.1.1",
"react": "^16.3.1",
"react-audio-player": "^0.10.0",
"react-carousel-slider": "^2.0.11",
"react-cookies": "^0.1.0",
"react-cropper": "^1.0.1",
"react-customizable-carousel": "0.0.7",
"react-detect-offline": "^2.1.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dock": "^0.2.4",
"react-dom": "^16.3.1",
"react-draft-wysiwyg": "^1.12.12",
"react-drag-and-drop": "^2.4.0",
"react-grid-gallery": "^0.4.11",
"react-image-crop": "^3.0.11",
"react-infinite-scroll-component": "^4.1.0",
"react-intl": "^2.3.0",
"react-loading-components": "^1.1.12",
"react-modal-video": "^1.1.2",
"react-pdf": "^3.0.5",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.7",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-navigation-prompt": "^1.8.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-scripts": "1.0.17",
"react-sidebar": "^2.3.2",
"react-sliding-pane": "^2.0.2",
"react-smooth-scrollbar": "^8.0.6",
"react-soundplayer": "^1.0.4",
"react-textarea-count": "^1.0.3",
"react-throttle": "^0.3.0",
"react-truncate": "^2.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
"repl": "^0.1.3",
"reqwest": "^2.0.5",
"simple-react-validator": "0.0.7",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"video-react": "^0.10.4",
"yargs": "^11.0.0"
},
"devDependencies": {
"react-alice-carousel": "^1.10.1",
"react-app-rewired": "^1.4.0"
},
```
I am rendring it like this:
```
return (
<InfiniteScroll
dataLength={this.state.activeProduction_data.length} //This is important field to render the next data
next={this.loadMore}
hasMore={true}
loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>}
endMessage={
<p style={{textAlign: 'center'}}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">
<LayoutWrapper>
<Box>
<Form>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={24} sm={24} xs={24} >
<Tabs defaultActiveKey={this.state.defaultKey} onChange={this.typeChange} tabBarExtraContent={operations}>
<TabPane tab="LIVE" key="1"></TabPane>
<TabPane tab="DRAFT" key="2"></TabPane>
<TabPane tab="ARCHIVED" key="3"></TabPane>
</Tabs>
</Col>
</Row>
<Row style={rowStyle} gutter={gutter} justify="start">
{this.state.activeProduction_data.length > 0 ?
<ActiveProductionClass onArchiveClick={this.onArchiveClick} /* onCardClick={this.onCardClick} */ activeProductionData={this.state.activeProduction_data} />
: <div style={{ textAlign: "center", width: "100%" }}>{this.state.selected_type == 1 ? 'No Live Productions.' : ''}{this.state.selected_type == 2 ? 'No Draft Productions.' : ''}{this.state.selected_type == 3 ? 'No Archived Productions.' : ''}</div>}
</Row>
</Form>
</Box>
</LayoutWrapper>
</Spin>
</InfiniteScroll>
);
```
I have removed everything from the page and tried the one you gave in the example and I checked that nothing was still working. Does anyone have any idea which of the package is hindering with the performance?
I tried a little troubleshooting and checked that the package works but the loadmore function is not being called. I say this because the property loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>} in Infinitescroller works as i can see the spin on page. But when i scroll down on the page the loadmore function should call which is not getting called now and was working fine before.
Please help me guys! thanks!!!

Material-UI AppBar causes invalid tag error

I'm trying to insert AppBar into my component. While all other material-ui components work fine, this one causes the following error:
Uncaught Error: Invalid tag: /f7f7800bcef3562e6f4df1583b20797b.js
at invariant (bundle.js:724)
at validateDangerousTag (bundle.js:47303)
at new ReactDOMComponent (bundle.js:47330)
at Object.createInternalComponent (bundle.js:20522)
at instantiateReactComponent (bundle.js:21633)
at instantiateChild (bundle.js:46812)
at bundle.js:46839
at traverseAllChildrenImpl (bundle.js:21875)
at traverseAllChildrenImpl (bundle.js:21891)
at traverseAllChildrenImpl (bundle.js:21891)
That is a piece of code with AppBar:
import React, { Component } from 'react';
import { List, ListItem } from 'material-ui/List';
import AppBar from 'material-ui/AppBar';
class Contacts extends Component {
render() {
return (
<div>
<AppBar title="title"/>
<List>
<ListItem primaryText="text" secondaryText="text"/>
</List>
</div>
);
}
}
export default Contacts;
When i remove <AppBar ... /> everything works fine.
These are my dependecies:
"dependencies": {
"axios": "^0.15.3",
"events": "^1.1.1",
"font-awesome": "^4.7.0",
"material-design-icons": "^3.0.1",
"material-ui": "^0.17.0",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-router": "^3.0.2",
"react-tap-event-plugin": "^2.0.1",
"roboto-fontface": "^0.7.0",
"rxjs": "^5.1.1"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
}
The same error occurs when i try to use compoents from pre-built SVG Icon set.

Resources