Use Refs In Material UI

Question

I'm trying to use Refs in Material UI to change Image src but it gives me an 'Undefined' error. It looks like the link is getting created but not being applied as the Images src, I feel like the problem lies in line 10 .

CodeSandBox - https://codesandbox.io/s/complexgrid-material-demo-forked-h6zfqh?file=/demo.tsx

 const [loading] = useState(true); const imageRef = React.useRef(); let txt = "IGO"; useEffect(() => { imageRef.current.src = `https://flightaware.com/images/airline_logos/90p/${txt}.png`; console.log(imageRef.current.src); }, [loading, imageRef]); <ButtonBase sx={{ width: 128, height: 128 }}> <Img alt="complex" ref={imageRef} /> </ButtonBase>

Zaquiel Rodriguez Arce · Accepted Answer · 2022-04-30 14:53:26Z

You can use a list of references an change the image like you was doing. I let you a functional code that it works like I think you want :)

import * as React from "react"; import { styled } from "@mui/material/styles"; import Grid from "@mui/material/Grid"; import D34, { useEffect, useState } from "react"; import Paper from "@mui/material/Paper"; import Typography from "@mui/material/Typography"; import ButtonBase from "@mui/material/ButtonBase"; import Data from "./abc.json"; const Img = styled("img")({ margin: "auto", display: "block", maxWidth: "100%", maxHeight: "100%" }); export default function ComplexGrid() { const [loading] = useState(true); const imagesRef = []; let txt = "IGO"; useEffect(() => { imagesRef.forEach((refImg) => { refImg.src = `https://flightaware.com/images/airline_logos/90p/${txt}.png`; }); /*imageRef.current.src = `https://flightaware.com/images/airline_logos/90p/${txt}.png`; console.log(imageRef.current.src);*/ }, [loading]); return ( <div className="hello"> {Data.response.map((post, posPost) => { return ( <Paper sx={{ pt: 1, border: 1, boxShadow: 0, mt: 1, maxWidth: 900, flexGrow: 1, backgroundColor: (theme) => theme.palette.mode === "dark" ? "#1A2027" : "#fff" }} > <Grid container spacing={2}> <Grid item> <ButtonBase sx={{ width: 128, height: 128 }}> <Img alt="complex" ref={(imageRef) => { if (!imagesRef[posPost]) { imagesRef.push(imageRef); } }} /> </ButtonBase> </Grid> <Grid item xs={12} sm container> <Grid item xs container direction="column" spacing={2}> <Grid item xs> <Typography gutterBottom variant="subtitle1" component="div" > Standard license </Typography> <Typography variant="body2" gutterBottom> Full resolution 1920x1080 • JPEG </Typography> <Typography variant="body2" color="text.secondary"> ID: 1030114 </Typography> </Grid> <Grid item></Grid> </Grid> <Grid item> <Typography variant="subtitle1" component="div" sx={{ px: 2, p: 2 }} > $19.00 </Typography> </Grid> </Grid> </Grid> </Paper> ); })} </div> ); }

codmitu · Accepted Answer · 2022-04-30 14:46:58Z

you can use useState to change the src

 const [img, setImg] = useState() let txt = "IGO"; useEffect(() => { setImg(`https://flightaware.com/images/airline_logos/90p/${txt}.png`) }, [loading]); {img && <Img alt="complex" src={img} />}

user11847513 · Accepted Answer · 2022-04-30 14:41:23Z

The main problem is the way to use ref. At the moment, you are using same ref for same image component. In order to manage the image tags well, you should use different ref for each image tab.

Please refer this code.

import * as React from "react"; import { styled } from "@mui/material/styles"; import Grid from "@mui/material/Grid"; import D34, { useEffect, useState } from "react"; import Paper from "@mui/material/Paper"; import RootRef from "@material-ui/core/RootRef"; import Typography from "@mui/material/Typography"; import ButtonBase from "@mui/material/ButtonBase"; import Data from "./abc.json"; import { red } from "@mui/material/colors"; const Img = styled("img")({ margin: "auto", display: "block", maxWidth: "100%", maxHeight: "100%" }); export default function ComplexGrid() { const [loading] = useState(true); const imageRef = React.useRef(); let txt = "IGO"; useEffect(() => { console.log(imageRef.current.src); if (imageRef.current.src === "") imageRef.current.src = `https://flightaware.com/images/airline_logos/90p/${txt}.png`; }, [loading, imageRef]); return ( <div className="hello"> <Img alt="complex" ref={imageRef} /> {Data.response.map((post) => { return ( <Paper sx={{ pt: 1, border: 1, boxShadow: 0, mt: 1, maxWidth: 900, flexGrow: 1, backgroundColor: (theme) => theme.palette.mode === "dark" ? "#1A2027" : "#fff" }} > <Grid container spacing={2}> <Grid item> <ButtonBase sx={{ width: 128, height: 128 }}> {/* <Img alt="complex" ref={imageRef} /> */} </ButtonBase> </Grid> <Grid item xs={12} sm container> <Grid item xs container direction="column" spacing={2}> <Grid item xs> <Typography gutterBottom variant="subtitle1" component="div" > Standard license </Typography> <Typography variant="body2" gutterBottom> Full resolution 1920x1080 • JPEG </Typography> <Typography variant="body2" color="text.secondary"> ID: 1030114 </Typography> </Grid> <Grid item></Grid> </Grid> <Grid item> <Typography variant="subtitle1" component="div" sx={{ px: 2, p: 2 }} > $19.00 </Typography> </Grid> </Grid> </Grid> </Paper> ); })} </div> ); }

Hope it would be helpful for you. Thanks

Collectives™ on Stack Overflow

Use Refs In Material UI

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related