We Keep Coding

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")
);

How to change the language for KeyboardDatePicker material ui?

I am currently using material ui on the web and I use the KeyboardDatePicker API and it works perfectly, but the names of the months and the text of the buttons are shown in English and I want to change them to Spanish. I read the API documentation but I can't find information about it.
Anyone know how to change the language?

Another solution which worked for me is using date-fns/locale/*. The documentation can be found here.
For example in german:
import {KeyboardDatePicker, MuiPickersUtilsProvider} from "#material-ui/pickers";
import DateFnsUtils from "#date-io/date-fns";
import deLocale from "date-fns/locale/de";
render () {
return
(
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={deLocale}>
.
.
.
</MuiPickersUtilsProvider>
)
}
Result:

Try importing spanish moment locale and then using it in MuiPickersUtilsProvider:
import React from "react";
import ReactDOM from "react-dom";
import {
KeyboardDatePicker,
MuiPickersUtilsProvider
} from "#material-ui/pickers";
import MomentUtils from "#date-io/moment";
import "moment/locale/es";
import "./styles.css";
function App() {
return (
<div className="App">
<MuiPickersUtilsProvider locale="es" utils={MomentUtils}>
<KeyboardDatePicker />
</MuiPickersUtilsProvider>
</div>
);
}

For spanish the solution that worked for me is the following
import 'date-fns';
import React from 'react';
import { MuiPickersUtilsProvider, KeyboardDatePicker } from '#material-ui/pickers';
import FormControl from '#material-ui/core/FormControl';
import DateFnsUtils from '#date-io/date-fns';
import deLocale from "date-fns/locale/es";
import {useStyles} from './style';
export default function FormControlDate(props) {
const classes = useStyles();
return (
<FormControl className={classes.formControl} >
<MuiPickersUtilsProvider locale={deLocale} utils={DateFnsUtils} >
<KeyboardDatePicker
disableToolbar
variant="inline"
format="dd/MM/yyyy"
margin="normal"
id={props.name}
name={props.name}
key={props.name}
label={props.label}
value={props.value}
onChange={date=>{
props.handleChange({"target":{"name":props.name,"value":date}})
}}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</MuiPickersUtilsProvider>
</FormControl>
)
}

React Css Themr not working

My target is to have one main theme for the app and load custom vendor styles if one is set.
I have been following the tutorial of react-css-themr and I can't get it to work. The minimalistic example I could come up with is this:
my module:
import {render} from 'react-dom'
import React from 'react';
import {Item} from './components/presentational/Item';
import {ThemeProvider} from 'react-css-themr';
import style from './theme/ItemDefault.scss';
const contextTheme = {
Item: require('./theme/ItemVendor.scss'),
};
const About = () => {
return (
<ThemeProvider theme={contextTheme}>
<Item theme={style} className={style.red}/>
</ThemeProvider>
)
};
ItemDefault.scss:
.button{
color:deeppink;
}
ItemVendor.scss:
.button{
color:orangered;
}
That doesn't seem to give my any classes or any styling. Any ideas please?

The way I was wiring components was incorrect. The way to do this is as follows:
In the root component you need to have your theme provider and theme attached to it. This theme will override any child component theming.
import {render} from 'react-dom'
import React from 'react';
import {ThemeProvider} from 'react-css-themr';
import inlineCss from './page.scss';
import {Item} from './components/Item';
const contextTheme = {
Item: require('./theme/ItemVendor.scss'),
};
render((
<ThemeProvider theme={contextTheme}>
<Item />
</ThemeProvider>
), document.getElementById('app'));
The component itself will have it's default theming and then will be wrapped with themr API to overwrite the it's default settings.
import {render} from 'react-dom'
import React from 'react';
import { themr } from 'react-css-themr';
import defaultTheme from './Item.scss';
const DefaultItem = ({theme}) => {
return (
<div className={theme.button} >
Example item
</div>
)
};
export const Item = themr('Item', defaultTheme)(DefaultItem);
I put together a github repo showing how to use this:
https://github.com/adamgajzlerowicz/react-css-themr

React Material UI: error after importing some components

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.