Hi I was reproducing a MERN project to create a social app.
When I use materail-ui/core everything work fine, but I got in console.log this warning :
deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:
My container balise works fine but i got a warning about that too.(See the image).
here is my code :
import { Container, AppBar, Typography, Grow, Grid } from "#material-ui/core";
// this method is deprecated
import memories from "./components/images/memories.png";
// la route de l'image se trouve dans components
import Posts from "./components/Posts/Posts.js";
import Form from "./components/Form/Form.js";
// .js a la fin ??
function App() {
return (
// <div>yo</div>
<div>
<Container maxidth="lg">
<AppBar position="static" color="inherit">
<Typography variant="h2" align="center">
Memories
<img src={memories} alt="memories" height="60" />
</Typography>
</AppBar>
<Grow in>
<Container>
<Grid
container
justifyContent="space-between"
alignItems="stretch"
spacing={3}
>
{/* grid pour les devices grandeur des telephoens */}
<Grid item xs={12} sm={7}>
<Posts />
</Grid>
<Grid item xs={12} sm={4}>
<Form />
</Grid>
</Grid>
</Container>
</Grow>
</Container>
</div>
);
}
export default App;
So is this really deprecated because it's seems to work fine for me ?
Related
hello my friends im wana make reponsive web with matreial ui but in tablte size have problem
this case im show all device but my problem in tablet responsive
i need help to fix them if can chnage code and seend me
desktop
Mobile
bug tablete
for examp this is my leftSide style
container:{
paddingTop:theme.spacing(10),
backgroundColor:theme.palette.primary.main,
height:"100vh",
color:"white",
[theme.breakpoints.up("sm")]:{
backgroundColor:"white",
color:'#555',
border:"1px solid #999"
},
position:'sticky',
top:0
},
item:{
display:'flex',
alignItems:'center',
marginBottom:theme.spacing(4),
[theme.breakpoints.up("sm")]:{
marginBottom:theme.spacing(3),
cursor:"pointer",
}
},
icon:{
marginRight:theme.spacing(1),
[theme.breakpoints.up("sm")]:{
fontSize: "18px"
}
},
text:{
fontFamily:"vazir !important",
fontWeight:100,
[theme.breakpoints.up("sm")]:{
display:'block'
},
[theme.breakpoints.down("sm")]:{
display:"none"
},
}
And this is my Layout
import { Grid } from "#mui/material";
import React from "react";
import Leftbar from "../components/Leftbar";
import Navbar from "../components/Navbar";
import Feed from "../components/Feed";
import Rightbar from "../components/Rightbar";
import useStyle from "./style/main";
import Add from "../components/Add";
function Layout() {
const classes = useStyle();
return (
<div>
<Navbar />
<Grid container>
<Grid item sm={2} xs={2}>
<Leftbar />
</Grid>
<Grid item sm={7} xs={10}>
<Feed />
</Grid>
<Grid item sm={3} className={classes.right}>
<Rightbar />
</Grid>
</Grid>
<Add />
</div>
);
}
export default Layout;
I imported #material-ui/core, #devexpress/dx-react-core #devexpress/dx-react-grid and some other modules but issue is not resolving.
My App.js code:
import Grid from '#material-ui/core/Grid';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<Grid container spacing={2}>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</div>
);
}
export default App;
Actually definition is not there. Just place this before App() function:
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
It will work.
The problem is that the example provided for the Grid component is a bit misleading. I just had exactly the same trouble with the Stack component, which suffers from the same problem.
If you use the example code as-is, it gives exactly this error because it includes Item elements. This gives the impression that each of your code fragments in the control needs to be wrapped in an Item element. Unfortunately, there is no such thing (unless you happen to define one).
So the solution is simply to exclude the Item elements:
return (
<div className="App">
<Grid container spacing={2}>
<Grid item xs={8}>
<p>xs=8</p>
</Grid>
<Grid item xs={4}>
<p>xs=4</p>
</Grid>
<Grid item xs={4}>
<p>xs=4</p>
</Grid>
<Grid item xs={8}>
<p>xs=8</p>
</Grid>
</Grid>
</div>
);
I have a login page where I'm placing a button "Watch the video". On click of the button, I'm hiding the button and displaying a video.
Now my requirement is to start playing the video as soon as it displays without having to click the play button.
I'm trying to use refs and somehow I'm unable to set the ref to my video element.
Is there any way to set the refs to unrendered elements in componentDidUpdate?
Please help me!
Following is my code
export default class NewLoginPage extends Component {
constructor(props) {
this.vidRef = React.createRef();
this.state = {
showVideo: false
};
}
handleVideoClick = () => {
this.setState({ showVideo: true })
this.vidRef.current.play();
}
handleCloseClick = () =>{
this.setState({ showVideo: false })
}
render() {
let language_labels = labels["english_labels"]
console.log(labels)
console.log(language_labels)
return (
<div className="container-fluid no-padding">
<div className="new-login-div">
<AppBar className="app-bar">
<Toolbar className="tool-bar">
<img src={pmiLogo} />
{/* <NavLink to="/" id="invoice_upload">LOG OUT</NavLink> */}
{/* <Button className="logout-btn">REGISTER</Button> */}
</Toolbar>
</AppBar>
<Grid container>
<Grid item xs={4}>
<h1 className="welcome-heading">Self Service Portal</h1>
<TextField
className="id-field"
placeholder="Email"
inputProps={{
style: {
color: "#fff",
paddingLeft: "5px"
}
}}
/>
<br />
<Button className="login-btn" endIcon={<ArrowForwardIcon />}>Log In</Button>
</Grid>
<Grid item xs={8}>
<div className="video-div">
{this.state.showVideo && <div>
<IconButton className="close-btn" onClick={(event) => this.handleCloseClick()}>
<CloseIcon />
</IconButton>
<video ref={ref => { this.vidRef = ref }} width="500" height="285" controls className="video-container">
<source src={exampleVid} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>}
{!this.state.showVideo && <div className="intro-div">
<h5 className="intro-text">
Supporting the vitality and survival of US small businesses—who employ nearly half of the American workforce—is especially critical now. Let’s not forget just how essential they are.
</h5>
<Button
disableRipple={true}
className="video-button"
startIcon={<PlayArrowIcon className="play-icon" />}
onClick={(event) => this.handleVideoClick()}
>
Watch video
</Button>
<br />
<Button
disableRipple={true}
className="reg-button"
startIcon={<ChevronRightIcon className="play-icon" />}>
Register
</Button>
</div>}
</div>
</Grid>
</Grid>
</div>
</div>
);
}
}
React ref property is used to access DOM element reference.
If element is not rendered then DOM element is not created (deleted).
Thus you can't get a ref of something that doesn't exist.
You don't need to use a ref to do that, you can add the autoplay html property to your <video>
for details on autoplay
You can't make use of a ref to an element that is not yet rendered as Anton explained in his answer, the ref.current will be null.
However, it is suggested that you create a separate component for the video and it's logic from that of the login, not only it will solve the issue (the this.state.showVideo condition will stay in the parent component) but it is also how React components should be, for more details refer to this.
Using react.js I want to make a dynamic UI, I have something like this:
<div>
<appbar component />
<drawer (sidebar) comopnent /> <!-- <--has buttons -->
<content component> <!-- <-- component to replace or re-render -->
<footer component>
</div>
Then I try to use an state to save and change the "" like this:
const [renderView, setRenderView] = useState("<Home />");
/* onclick call this function and pass referenced component ej: <reports /> */
function changeContent(view){
setRenderView(view);
return(
<Suspense fallback={renderLoader()}>
{view}
</Suspense>
);
}
Now, how to replace the " content component " with the new one?.
Thanks for your comments.
i made this bassed on suggestions, its working, but im not using class just functions
function Dashboard(props) {
/* lazy loading */
const renderLoader = () => <p>Loading...!?¡?</p>;
/* lazy components */
const Initial = () => (
<Suspense fallback={renderLoader()}>
<InitialComponent />
</Suspense>
)
const Reports = () => (
<Suspense fallback={renderLoader()}>
<ReportsComponent />
</Suspense>
)
const Cards = () => (
<Suspense fallback={renderLoader()}>
<CardsComponent />
</Suspense>
)
/* set view state */
const [renderView, setRenderView] = useState(Initial());
function changeContent(view){
setRenderView(view);
}
const test = (cosa) => {
console.log(cosa);
}
/* style things*/
const classes = useStyles();
const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
return (
<div className={classes.root}>
<CssBaseline />
<UIappbar />
<UIsidebar />
<main className="contentWrapper">
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<div>
<Button onClick={() => changeContent(Reports())}>Reports view</Button>
</div>
<div>
<Button onClick={() => changeContent(Cards())}>Cards view</Button>
</div>
</Grid>
<Grid item xs={12} md={8} lg={9}>
<Paper className={fixedHeightPaper}>
{renderView}
</Paper>
</Grid>
</Grid>
</main>
</div>
);
}
Now i need to call "changeContent()" that has the method to change {renderView} need to call it from a child
dont know how to pass props without class format (im using functions only)
should i change to class with constructor format?
This example comes from material-ui-next website but somehow I can't see the image which is the "lizard image" when I try to run it on my computer.
Why can see the image? I got no error in my console and the "simple card" example in the website is working to me but not the one with image like "Lizard". (I think my error is in the path of image or src of image)
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
const styles = {
card: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
},
};
function SimpleMediaCard(props) {
const { classes } = props;
return (
<div>
<Card className={classes.card}>
<CardMedia
className={classes.media}
image="/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
);
}
SimpleMediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleMediaCard);
Now i know, I change the path of Image to
import logo from './lizard.jpg';
<CardMedia
className={classes.media}
image={logo}
title="Contemplative Reptile"
/>
If you are using some url to image, you probably have to use img component and give its path in src.
<CardMedia
component="img"
src={url}
/>