i have this code
import MuiDialog from "@mui/material/Dialog";
import { styled } from "@mui/material/styles";
const TheDialog = styled((DialogProps) => (
<MuiDialog {...DialogProps} />
))(({ theme }) => ({
"& .css-tlc64q-MuiPaper-root-MuiDialog-paper": {
background: "linear-gradient(90deg, rgb(142, 31, 195) 0%, rgb(6, 111, 197) 100%)",
color:"white"
},
"& .css-tlc64q-MuiPaper-root-MuiDialog-paper *": {
color:"white"
},
"& .css-tlc64q-MuiPaper-root-MuiDialog-paper button *": {
color:"black"
},
"& .css-tlc64q-MuiPaper-root-MuiDialog-paper button": {
alignItems: "center",
background: "#FFFFFF",
border: "1px solid rgba(0, 0, 0, 0.1)",
borderRadius: ".25rem",
boxShadow: "rgba(0, 0, 0, 0.02) 0 1px 3px 0",
boxSizing: "border-box",
color: "rgba(0, 0, 0, 0.85)",
cursor: "pointer",
fontFamily: "system-ui,-apple-system,system-ui,Helvetica Neue,Helvetica,Arial,sans-serif",
fontSize: "13px",
fontWeight: "600",
textDecoration: "none",
transition: "all 250ms",
userSelect: "none",
webkitUserSelect: "none",
touchAction: "manipulation",
},
"& .css-tlc64q-MuiPaper-root-MuiDialog-paper button:hover": {
transform: "translateY(-1px)"
},
"& .css-tlc64q-MuiPaper-root-MuiDialog-paper button:focus": {
borderColor: "rgba(0, 0, 0, 0.15)",
boxShadow: "rgba(0, 0, 0, 0.1) 0 4px 12px",
color: "rgba(0, 0, 0, 0.65)"
},
"& .css-tlc64q-MuiPaper-root-MuiDialog-paper button:active": {
backgroundColor: "#F0F0F1",
borderColor: "rgba(0, 0, 0, 0.15)",
boxShadow: "rgba(0, 0, 0, 0.06) 0 2px 4px",
color: "rgba(0, 0, 0, 0.65)",
transform: "translateY(0)"
},
}));
function Dialog({handleClose,open,children}){
return( <TheDialog
onClose={handleClose}
fullWidth={true}
maxWidth={"sm"}
open={open}
>
{children}
</TheDialog>)
}
function App() {
const textAreaRef = React.useRef(null);
const handleClick = () => {
console.log(textAreaRef.current.value);
};
return (
<div className="App"
open={true}
handleClose={()=>{}}
title="My Dialog">
<Dialog title="My Dialog">
<textarea ref={textAreaRef} rows="3" placeholder="Enter text here" />
<button onClick={handleClick}>Click me</button>
</Dialog>
</div>
);
}
export default App;
For some reason the ref gives me null.
It doesn’t give me null if I put the text area outside Dialog like so:
function App() {
const textAreaRef = React.useRef(null);
const handleClick = () => {
console.log(textAreaRef.current.value);
};
return (
<div className="App">
<textarea ref={textAreaRef} rows="3" placeholder="Enter text here" />
<Dialog
open={true}
handleClose={()=>{}}
title="My Dialog">
<button onClick={handleClick}>Click me</button>
</Dialog>
</div>
);
}
so I’m pretty sure the error has something to do with passing refs, although I don’t know how to use it with a custom component that has opening and closing tags
I searched the internet and even tried chatgpt and couldn’t find an answer so yall are my last resort lol
Thanks!!