How do I show an "Success" (or similar) type message on a form submission?
Answered
Transvaal lion posted this in #help-forum
Transvaal lionOP
I am trying to handle the response from a form submission by displaying an alert of some sort. How do I add a new component to a page that has already been rendered?
Something like
doesn't work - no errors are surfaced in the console, but no changes are observed on the page either.
I've considered adding both a "success" and "failure" Alert component to the page, then hiding them, but I'm not clear on how to do this either (I could do it through CSS I would guess).
I'm attemping to use the Alert component from https://mui.com/material-ui/api/alert/. The component works if I statically add it as an element on the page.
Any help is appreciated. Thanks.
Something like
const data = await response
console.log(data)
if (data.status === 200) {
// Dynamically add the "success" alert.
<Alert onClose={() => { }}> This is a success alert — check it out!</Alert>
} else {
<Alert severity="error" onClose={() => { }}>There was an error submitting the data. Please contact the site's owner.</Alert>
// Show the error alert
}doesn't work - no errors are surfaced in the console, but no changes are observed on the page either.
I've considered adding both a "success" and "failure" Alert component to the page, then hiding them, but I'm not clear on how to do this either (I could do it through CSS I would guess).
I'm attemping to use the Alert component from https://mui.com/material-ui/api/alert/. The component works if I statically add it as an element on the page.
Any help is appreciated. Thanks.
Answered by Ray
export default function Page() {
const [success, setSuccess] = useState(null)
return (
<>
<p>Hi!</p>
<Button variant="contained" onClick={() => { setSuccess(true) }}>Do something fun.</Button>
{success === true && <Alert onClose={() => { }}> This is a success alert — check it out!</Alert>}
{success === false && <AlertDyn onClose={() => { }}> This is a success alert — check it out!</AlertDyn>}
</>
)
}5 Replies
@Transvaal lion I am trying to handle the response from a form submission by displaying an alert of some sort. How do I add a new component to a page that has already been rendered?
Something like
const data = await response
console.log(data)
if (data.status === 200) {
// Dynamically add the "success" alert.
<Alert onClose={() => { }}> This is a success alert — check it out!</Alert>
} else {
<Alert severity="error" onClose={() => { }}>There was an error submitting the data. Please contact the site's owner.</Alert>
// Show the error alert
}
doesn't work - no errors are surfaced in the console, but no changes are observed on the page either.
I've considered adding both a "success" and "failure" Alert component to the page, then hiding them, but I'm not clear on how to do this either (I could do it through CSS I would guess).
I'm attemping to use the Alert component from https://mui.com/material-ui/api/alert/. The component works if I statically add it as an element on the page.
Any help is appreciated. Thanks.
return (
<>
{
data.status === 200
? <Alert onClose={() => { }}> This is a success alert — check it out!</Alert>
: <Alert severity="error" onClose={() => { }}>There was an error submitting the data. Please contact the site's owner.</Alert>
}
</>
)Transvaal lionOP
This doesn't seem to work. I've created the smallest working example of what I think I'm trying to do (except, not including the form submit bit). I have tried returning the Alert as a dynamically generated component, also without success.
When clicking the button, I am seeing the entry in the console, but no changes to the UI.
"use client"
import { Alert } from '@mui/material';
import dynamic from 'next/dynamic';
const AlertDyn = dynamic(() => import('@mui/material/Alert'), { ssr: false });
import * as React from 'react';
import Button from '@mui/material/Button';
export default function Page() {
function doSomethingFun() {
console.log("into doing something fun. Now, how to show an alert.")
return (
<>
<Alert onClose={() => { }}> This is a success alert — check it out!</Alert>
<AlertDyn onClose={() => { }}> This is a success alert — check it out!</AlertDyn>
</>
)
}
return (
<>
<p>Hi!</p>
<Button variant="contained" onClick={doSomethingFun}>Do something fun.</Button>
</>
)
}When clicking the button, I am seeing the entry in the console, but no changes to the UI.
@Transvaal lion This doesn't seem to work. I've created the smallest working example of what I think I'm trying to do (except, not including the form submit bit). I have tried returning the Alert as a dynamically generated component, also without success.
ts
"use client"
import { Alert } from '@mui/material';
import dynamic from 'next/dynamic';
const AlertDyn = dynamic(() => import('@mui/material/Alert'), { ssr: false });
import * as React from 'react';
import Button from '@mui/material/Button';
export default function Page() {
function doSomethingFun() {
console.log("into doing something fun. Now, how to show an alert.")
return (
<>
<Alert onClose={() => { }}> This is a success alert — check it out!</Alert>
<AlertDyn onClose={() => { }}> This is a success alert — check it out!</AlertDyn>
</>
)
}
return (
<>
<p>Hi!</p>
<Button variant="contained" onClick={doSomethingFun}>Do something fun.</Button>
</>
)
}
When clicking the button, I am seeing the entry in the console, but no changes to the UI.
export default function Page() {
const [success, setSuccess] = useState(null)
return (
<>
<p>Hi!</p>
<Button variant="contained" onClick={() => { setSuccess(true) }}>Do something fun.</Button>
{success === true && <Alert onClose={() => { }}> This is a success alert — check it out!</Alert>}
{success === false && <AlertDyn onClose={() => { }}> This is a success alert — check it out!</AlertDyn>}
</>
)
}Answer
Transvaal lionOP
Thanks. I'm still stuck thinking about adding elements to the DOM.