React Material UI: error after importing some components - javascript

I try different Material UI components. Very very basic stuff.
My code:
import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import FlatButton from 'material-ui/FlatButton';
injectTapEventPlugin();
const App = () => (
<MuiThemeProvider>
<div>
<FlatButton label="Default" />
<FlatButton label="Primary" primary={true} />
<FlatButton label="Secondary" secondary={true} />
<FlatButton label="Disabled" disabled={true} />
</div>
</MuiThemeProvider>
);
ReactDOM.render(<App />, document.getElementById('app'));
It works without any problems. But if I add Menu component
///...///
import FlatButton from 'material-ui/FlatButton';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
injectTapEventPlugin();
///...///
I see Uncaught TypeError: wrapDisplayName is not a function in the browser and everything is broken.

Related

React draft wysiwyg dropdown not working problem

Editor is working but dropdown not working,
toolbar image
import { useState } from 'react';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
const MyEditor = () => {
let editorState = EditorState.createEmpty();
const [description, setDescription] = useState(editorState);
const onEditorStateChange = (editorState) => {
setDescription(editorState);
};
return (
<div>
<Editor
editorState={description}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onEditorStateChange={onEditorStateChange}
/>
</div>
);
};
export default MyEditor;
When clicking on the dropdown it shows following warning in console
Console image
Change your index.js
from
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
to
import React from "react";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { render } from "react-dom"; // add this
render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);

React wont run more than one tag inside <div className="App">. React error #321

I have been trying to make a button using react-bootstrap. However, I cannot render it when deploying the server.
This is the App.js
import "./App.css";
import Search from "./pages/Search";
import Home from './pages/home';
import {Button} from 'react-bootstrap';
import { Routes, Route } from 'react-router-dom';
const App = () => (
<div className="App">
<Button>Testing Button</Button>
<Search />
</div>
)
export default App;
Note : the is a page for rendering search API.
This is the Index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
// <React.StrictMode>
<App />,
// </React.StrictMode>,
document.getElementById("root")
);

Change react antd DatePicker language

How Can I set the antd Datepicker language to french?
I tried this :
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import moment from "moment";
import { DatePicker, Space, ConfigProvider } from "antd";
import frFR from "antd/lib/locale/fr_FR";
function onChange(date, dateString) {
console.log(date, dateString);
}
ReactDOM.render(
<Space direction="vertical">
<ConfigProvider locale={frFR}>
<DatePicker
onChange={onChange}
defaultValue={moment("2015-01-01", "YYYY-MM-DD")}
/>
</ConfigProvider>
</Space>,
document.getElementById("container")
);
The preview language is still in English.
Here is a running code:
https://codesandbox.io/s/basic-antd-datepicker-language-n9ue7
From the ant design doc
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
<DatePicker locale={locale} />;
https://ant.design/components/date-picker/#Localization

How to fix React.Children.only expected to receive a single React element child in react.js?

I am working on a react app with redux for state management but getting the following error while rendering the app.
On npm start a blank white screen gets rendered with following error in the console.
react.development.js:220 Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Provider`, expected a single ReactElement.
at Provider (http://localhost:3000/static/js/bundle.js:87358:27)
react.development.js:1139 Uncaught Error: React.Children.only expected to receive a single React element child.
at Object.onlyChild [as only] (react.development.js:1139)
at Provider.render (Provider.js:60)
at finishClassComponent (react-dom.development.js:17485)
at updateClassComponent (react-dom.development.js:17435)
at beginWork (react-dom.development.js:19073)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
Here's my app.js and index.js:
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import { Provider } from "react-redux";
import configureStore from "../src/clientDashboard/configureStore";
import { combineReducers } from "redux";
import clients from "../src/clientDashboard/actions/clientReducer";
import Layout from "./clientDashboard/Layout";
export default combineReducers({
clients: clients,
});
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
{<App/>},
</Provider>,
document.getElementById("root")
);
app.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Layout from "./clientDashboard/Layout";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "semantic-ui-react";
class App extends Component {
render() {
return (
<div className="App">
<Layout />
</div>
);
}
}
export default App;
Here's my Layout component for your reference:
import { Grid, Form } from 'semantic-ui-react';
import Typography from './ui-components/Typography';
import Table from './Table/Layout';
import Input from './SearchInput';
import styled from './constants/style/styled';
import colorPalette from './constants/style/colorPalette';
import CreatePopup from './Form/Popup';
const StyledTypography = styled(Typography)`
padding-right: 8px ;
`;
const StyledGridRow = styled(Grid.Row)`
padding-top: ${props => props.paddingtop} !important;
padding-bottom: ${props => props.paddingbottom} !important;
`;
const Layout = () => (
<div>
<Grid columns='equal'>
<Grid.Row>
<Grid.Column textAlign='left' width={13}>
{console.log("grid-col")}
<Typography color={colorPalette.instaGrey7} size='big' bold className='inline'>clients</Typography>
</Grid.Column>
<Grid.Column width={3} textAlign='right'>
{console.log("popup")}
<CreatePopup position='bottom right' triggertext='client' width='calc(100vw - 300px)' />
</Grid.Column>
</Grid.Row>
<StyledGridRow paddingbottom='5px'>
<Grid.Column width={6}>
<Typography color={colorPalette.instaGrey7} size='small' bold className='inline'>{'ui.label.client.list.allcaps'}</Typography>
{console.log("typo")}
</Grid.Column>
<Grid.Column textAlign='right' width={10}>
<Form>
{console.log("form")}
<StyledTypography color={colorPalette.instaGrey7} size='small' className='inline'>{'ui.label.search.client'}</StyledTypography>
<Input />
{console.log("input")}
</Form>
</Grid.Column>
</StyledGridRow>
<StyledGridRow paddingtop='5px'>
<Grid.Column>
<Table />
</Grid.Column>
</StyledGridRow>
{console.log("gridnnd")}
</Grid>
{console.log("div")}
</div>
);
export default Layout;
P.S: I tried wrapping the index.js render element with React.Navigator but still getting the error.
Any help will be appreciated.
Regards
As far as I understand the problem is here:
<Provider store={store}>
{<App/>}, <- error is here, remove {} and ,
</Provider>
You are trying to set multiple React Elements, you first Element is {<App/>} and the second one ,, but Provider requires only one item.
You should change your code to the following:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import { Provider } from "react-redux";
import configureStore from "../src/clientDashboard/configureStore";
import { combineReducers } from "redux";
import clients from "../src/clientDashboard/actions/clientReducer";
import Layout from "./clientDashboard/Layout";
export default combineReducers({
clients: clients,
});
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById("root")
);
Hope, it helps

Url change but not rendering component React Router

Hi i am trying to change the route of my website to go to Contact, when the menu is clicked.
Whenever i press the button for the homepage which is "Forside", the routing works perfectly.
But as soon as i press the button for the contact which is "Kontakt", the url changes and no component renders. But if i refresh the page, it shows up..
Any ideas what is wrong with my code, or any way to fix it?
All help will be appreciated thanks.
My App.js
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Forside from './forside';
import Kontakt from './Kontakt';
import Header from './Header'
const App = () => {
return(
<Router>
<div>
<Header/>
<Switch>
<Route exact path="/" component={Forside}/>
<Route path="/kontakt" component={Kontakt}/>
</Switch>
</div>
</Router>
)
}
export default App
And this is where i link to the different routes.
import React, { useState } from 'react';
import './header.css'
import { makeStyles } from '#material-ui/core/styles';
import BottomNavigation from '#material-ui/core/BottomNavigation';
import BottomNavigationAction from '#material-ui/core/BottomNavigationAction';
import ContactMailIcon from '#material-ui/icons/ContactMail';
import LocationOnIcon from '#material-ui/icons/LocationOn';
import {Link} from 'react-router-dom';
const useStyles = makeStyles({
root: {
width: 500,
},
});
const Header = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return(
<div className="hed">
<h1 className="logo"><span>IT</span> ARBEJDE.DK</h1>
<BottomNavigation
value={value}
className="nav"
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
className={classes.root}
>
<Link to="/">
<BottomNavigationAction label="Søg job" icon={<LocationOnIcon />} />
</Link>
<Link to="/kontakt">
<BottomNavigationAction label="Kontakt" icon={<ContactMailIcon/>} />
</Link>
</BottomNavigation>
</div>
)
}
export default Header
add exact to it to your route
<Route exact path="/kontakt" component={Kontakt}/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Since i didn't get a answer, i have figured it out on my own. So i would just like to share the solution, for other people who maybe are expecting the same bug.
I fixed the problem, by restructuring my code.
I placed my router inside the index.js component like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router} from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<App/>
</Router>
</React.StrictMode>,
document.getElementById('root')
);
Then placed the Header code inside my App.js, instead of having the Component rendering.
So i refactored the code like this:
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Kontakt from './Kontakt';
import Forside from './forside';
import { makeStyles } from '#material-ui/core/styles';
import BottomNavigation from '#material-ui/core/BottomNavigation';
import BottomNavigationAction from '#material-ui/core/BottomNavigationAction';
import ContactMailIcon from '#material-ui/icons/ContactMail';
import LocationOnIcon from '#material-ui/icons/LocationOn';
import {Link} from 'react-router-dom';
import './header.css'
const useStyles = makeStyles({
root: {
width: 500,
},
});
const App = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return(
<div>
<div className="header-container">
<h1 className="logo"><span>IT</span> ARBEJDE.DK</h1>
<BottomNavigation
value={value}
className="nav"
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
className={classes.root}
>
<BottomNavigationAction label="Søg job" component={Link} to="/" icon={<LocationOnIcon />} />
<BottomNavigationAction label="Kontakt" component={Link} to="/kontakt" icon={<ContactMailIcon/>} />
</BottomNavigation>
</div>
<Switch>
<Route exact path="/" component={Forside}/>
<Route exact path="/kontakt" component={Kontakt}/>
</Switch>
</div>
)
}
export default App

Categories