I created very simple custom components MuiMenu and MuiMenuItem. But when I try displaying these components I see an error as shown below:
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `ForwardRef(Menu)`.
But if I import directly from #material-ui/core - all is well. How do I fix this?
Working example:
https://codesandbox.io/s/sharp-shadow-bt404?file=/src/App.js
As the error says, Material-UI is using ForwardRef and you need to include that in your code. Below is a fix to your MuiMenu and MuiMenuItem Components;
MuiMenu
import React from "react";
import Menu from "#material-ui/core/Menu";
const MuiMenu = React.forwardRef((props, ref) => {
return <Menu ref={ref} {...props} />;
});
export default MuiMenu;
MuiMenuItem
import React from "react";
import MenuItem from "#material-ui/core/MenuItem";
const MuiMenuItem = React.forwardRef((props, ref) => {
return <MenuItem ref={ref} {...props} />;
});
export default MuiMenuItem;
Also there was an error with the strictmode you used at index so I removed it.
Index.JS
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<App />,
rootElement
);
here is a link to the fixed sandbox: https://codesandbox.io/s/hopeful-thunder-u6m2k
And here are other links to help you understand a bit more: https://material-ui.com/getting-started/faq/#how-do-i-use-react-router | https://reactjs.org/docs/react-api.html#reactforwardref
Related
I'm working on shopping Cart app, I want to use a Modal Form to display the cart's content and additional options before place the order, that's why I'm using Portals, so far, the source code of my Modal.js looks like this:
import { Fragment } from 'react';
import ReactDOM from 'react';
//import ReactDOM from 'react-dom/client';
import classes from './Modal.module.css';
const Backdrop = (props) => {
return <div className={classes.backdrop} onClick={props.onClose}/>;
};
const ModalOverlay = (props) => {
return (
<div className={classes.modal}>
<div className={classes.content}>{props.children}</div>
</div>
);
};
const portalElement = document.getElementById('overlays');
const Modal = (props) => {
return (
<Fragment>
{ReactDOM.createPortal(<Backdrop onClose={props.onClose} />, portalElement)}
{ReactDOM.createPortal(
<ModalOverlay>{props.children}</ModalOverlay>,
portalElement
)}
</Fragment>
);
};
export default Modal;
When I tried to load the modal form -clicking on an icon- I get this error:
This is the React's version I'm using:
This code used to work on previous version of React (17.x), the weird thing I tried to downgrade but still getting the same error.
My questions are:
In ver 18.x of React, Portals have been changed?
How can I downgrade React properly in order to test my code?
do you have any other suggestions how to overcome this issue using React's 18?
Thanks a lot
I had same error and I solved by importing
import ReactDOM from 'react-dom';
instead of
import ReactDOM from 'react-dom/client';
We are developing a using interface with React and Ant Design. We would like to override the default theme and colors. As an example we defines an array called themes. There is 4 differents themes as object. I defined a button to change theme. Reading the official docs I have included the following code in App.js to override the default theme but no success.
ConfigProvider.config(
{
theme:theme
}
)
Can anyone help me to override the default theme without less or anything else but just with ConfigProvider?
import "./App.css";
import "antd/dist/antd.css";
import { ConfigProvider } from "antd";
import { ThemeProvider } from "styled-components";
import ChangeTheme from "./components/ChangeTheme";
import { useContext } from "react";
import { AppContext } from "./_context";
const App = () => {
const { theme } = useContext(AppContext);
ConfigProvider.config({
theme: theme,
});
return (
<ThemeProvider theme={theme}>
<ConfigProvider>
<div className="App">
<ChangeTheme />
</div>
</ConfigProvider>
</ThemeProvider>
);
};
export default App;
First Step
you need to import antd.variable.min.css in one of your root files, like src/index.js which is recommended in the document,
import 'antd/dist/antd.variable.min.css';
Second Step
you also need to import antd's ConfigProvider in src/index.js:
import { ConfigProvider } from 'antd';
Third Step
then you need to modify the theme variables in config method of ConfigProvider like below:
ConfigProvider.config({ theme: { primaryColor: "#f00" } });
ps the vriables that you can modify in theme are:
primaryColor
errorColor
infoColor
processingColor
successColor
warningColor
Fourth Step
finally you wrap ConfigProvider around the <App/> component in src/index.js
<ConfigProvider>
{/* some other codes you might have */}
<App />
</ConfigProvider>
I'm new to ace and trying to build an Editor with react-ace.
Here is what I did:
npm install react-ace ace-builds
I added the following code to my App.js
import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
function onChange(newValue) {
console.log("change", newValue);
}
// Render editor
render(
<AceEditor
mode="java"
theme="github"
onChange={onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
/>,
document.getElementById("example")
);
However my browser shows this error: ReferenceError: ace is not defined
Here is my package.json:
Can you help me please. Thank you!
Add this code
import 'ace-builds/src-noconflict/ace';
To learn more, see our https://github.com/securingsincity/react-ace/issues/1233
There is no DOM element with example id. You are using create-react-app so you need to replace line:
document.getElementById("example")
to
document.getElementById("root")
Firstly, in App.js don't need to use again render function, because already use in index.js component. For example, your code will look like this:
import React from 'react';
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
const App = () => {
const onChange = (newValue) => {
console.log("change", newValue);
}
return (
<AceEditor
mode="java"
theme="github"
onChange={onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
/>
);
}
export default App;
make sure you are downloading ace-master, here is the link: https://github.com/ajaxorg/ace-builds.
Hello ,I am new to React and Now I would like to use MATERIAL-UI in my project but I got this error. Help me, please.
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:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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.
I Have Index.js Component:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
ReactDOM.render(
<React.Fragment>
<App />
</React.Fragment>,
document.getElementById("root")
);
registerServiceWorker();
and App.js is the functional Component:
import React from 'react'
import Layout from './Layout/Layout'
function App() {
return <Layout/>
}
export default App
and Styles.js Component from material-ui:
import { makeStyles } from "#material-ui/styles";
const useStyles = makeStyles({
root: {
display: "flex",
height: "100vh",
width: "100%",
},
rightSidebar: {
background: "#BDC3C7",
width:'18%'
},
leftSidebar: {
background: "#BDC3C7",
width:'25%'
},
mainPart: {
background: "#BDC3C7",
flex:1
},
});
export default useStyles;
and Layout.js Component is:
import React from "react";
import useStyles from "./Styles";
function Layout() {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.rightSideba}>right side bar</div>
<div className={classes.mainPart}>main part</div>
<div className={classes.leftSidebar}>left side bar</div>
</div>
);
}
export default Layout;
Thank you
Start simple: What React / React DOM versions do you have?
Then: Does your environment (browser?) start multiple instances of React / React DOM? (esp. any older ones dangling around)
I have a react component which i have wrapped & released as a web component. However all style-sheets created using makeStyles hook are not getting applied as the are inserted into the head section of the browser DOM.
Is there a way for me to configure the makeStyles hook and supply the shadowRoot as a the insertion point for the jss??
import React from "react";
import ReactDOM from "react-dom";
import { create as createJss } from "jss";
import preset from "jss-preset-default";
import { StylesProvider, jssPreset } from "#material-ui/styles";
import Content from "./Content";
const jss = createJss();
jss.setup({
...jssPreset(),
insertionPoint: document.getElementById("jss-insertion-point")
});
function App() {
return (
<JssProvider jss={jss}>
<Content />
</JssProvider>
<div id="jss-insertion-point"></div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Also see https://codesandbox.io/s/61qjy83qzz?file=/src/index.js:0-739 by Robin Ednam
Also https://github.com/cssinjs/jss/issues/466
Your component or main app component should be wrapped in
Got this done and working to Jitsi app now