Creating a pop-up confirmation message upon email submission through React and custom CSS styling

In my React project, I've created an email form and included the 

<div className="msg">Message has been sent</div>
class. However, I only want this message to display when the message has successfully been sent (status: true). How can I achieve this using only React/CSS?

.post('/api/email', values)
  .then((res) => {
    console.log("Server responded")
    setValues({
      name: "",
      email: "",
      message: "",
      status: true
    })
    .catch(err => {
      console.log(err);
      window.alert("Email not sent")
    });
javascriptcssreactjsnodemailer

Answer №1

If you have a status variable named "status," then

<div className="msg" style={{display: status ? "block" : "none"}}>Message has been sent</div>

That's all.

I would also recommend adding the following code:

.catch(err => {
setValues({
  name: "",
  email: "",
  message: "",
  status: false
  })
  console.log(err);
  window.alert("Email not sent")
});

Answer №2

To achieve the desired outcome, simply enclose the div in curly brackets and include a condition &&:

{values.status && <div className="msg">Message has been successfully delivered.</div>}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine whether the Bootstrap data-style attribute is enabled or disabled

I have a bootstrap checkbox that I would like to trigger an alert dialog when it is switched off. <div class="row"> <link href="css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="javascript/bootstrap-toggle.min.js ...

javascriptjqueryhtmlcss

Determining the local coordinate system of an object in THREE.js

I'm a beginner in Three.js and could use some guidance... I've been moving and rotating an object randomly multiple times. Eventually, I need to determine the orientation of the local coordinate system of that object for physics calculations... ...

javascriptthree.jssystemlocalcoordinate

Every time I navigate to a new page in NextJs, the useEffect hook

I am working on developing a new blog app with Next.js. In the current layout of the blog, I have successfully fetched data for my sidebar (to display "recent posts") using the useEffect/fetch method, as getInitialProps only works on Pages. However, this ...

javascriptreactjsnext.js

Issue with JavaScript causing circles to form around a parent div

I am struggling to position a set of circles around a parent div in my code. I want 6 circles to form a circle around the parent div, but they are not lining up correctly. Can someone help me identify what I'm doing wrong? var div = 360 / 6; var ra ...

javascripthtmlarrayscss

Tips for maintaining the visibility of the dynamic submenu while hovering over either the parent menu or submenu in vuejs

I'm currently working on a dynamic sidebar in vuejs and I need some assistance. The issue I'm facing is that I want the submenu to remain open when hovering over either the parent menu or the submenu itself. However, when I move the mouse away fr ...

javascripthtmlcssvue.jsvuejs2

Using JavaScript, pass an array containing a list of JSON values

I am attempting to store a list of JSON Objects in an array using JavaScript. Below is the list: [{"_id":1,"json":{"age":10,"name":"carlos"}},{"_id":2,"json":{"age":10,"name":"carlos"}}] Here is the code snippet I have written: var arrayResults = ' ...

javascriptjson

Unpredictable sizing patterns in a React project due to tailwindCSS's variable behavior

I'm having issues with a basic html + tailwind CSS setup in my React app. The strange thing is, it looks perfect in Tailwind Play (I've simplified it here but it behaves as I desire, you can see it here: https://play.tailwindcss.com/QzEtC4jITX) b ...

htmlreactjstailwind-css

When using CasperJS to capture multiple screenshots, the most recent screenshot will replace all previous ones

Exploring CasperJS has been a great experience for me. Despite my enjoyment, I've encountered an issue with casper.capture() that has me stumped. I've set it up to capture screenshots whenever a test fails and placed it in a separate setup module ...

javascriptcasperjs

Tips for preventing extra whitespaces and line breaks from being added to the render tree in Blazor applications

Consider the code snippet below <div> @for (int i = 0; i < 10; i++) { <span class="@classes[i]">@i</span> } </div> The desired output is (with each character styled differently) 01234567890 Howev ...

htmlcssrazorblazor

How to shift an image to the right side of the navbar

Is it possible to change the position of an image within a navbar from left to right? I have tried using the float property but it doesn't seem to work. .logo-img{ float: right; margin: 0px 15px 15px 0px; } <a class="navbar-brand logo-img" ...

javascriptcssnavbarbootstrap-5nav

What benefits come from dynamically loading and unloading JavaScript and CSS stylesheets?

Introduction: Currently, I am in the process of developing a website that will utilize ajax to change content without refreshing the main frame and images every time. The main frame has its own site.css stylesheet. Query 1: Considering the use of a sing ...

javascripthtmlcssajax

What is the method to generate a Select Drop-down List using Form Inputs as properties for a Component in React?

I am looking to create a versatile form component that dynamically renders based on the inputs passed as props. The input fields are initially set as an array of objects like this: const userInputs = [ { id: "email", label: " ...

reactjsdrop-down-menu

Load a script in a specific div using React

Can anyone assist me with loading a script onto a specific component in my React application? Here is the script that needs to be loaded at the bottom-most div within my component: <div id="rexxxx"></div> <script> new carouselI ...

javascriptreactjs

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...

htmlcss

Is it possible to load a JS file without using the require function?

Is there a method to load a JavaScript file without using require, but with fs for instance? I am aware that for JSON files I can utilize: const jsonFile = JSON.parse(fs.readFileSync("/jsonfile.json")) Can the same be done for a JavaScript file? I am inq ...

javascriptnode.js

How can I update two divs simultaneously with just one ajax call?

Is there a way to update 2 divs using only one ajax request? The code for updating through ajax is in ajax-update.php. <?php include("config.inc.php"); include("user.inc.php"); $id = $_GET['id']; $item = New item($id); $result = $item->it ...

javascriptphpjqueryhtmlajax

Utilize features from both angular-strap and ui-bootstrap to enhance your project

Is it possible to efficiently utilize components from both angular-strap and ui-bootstrap without encountering conflicts that could potentially disrupt the application's functionality? For instance: Opt for a customized version of ui-bootstrap that ...

javascriptangularjsangular-ui-bootstrapangular-strap

Deleting a page reference from the page history stack in Angular 4

I am working on my angular web application and I am looking for a way to remove a specific page reference from the angular page history stack. For example, if I navigate from the login page to the dashboard page, I want to remove the login page reference f ...

javascriptangularangular2-routing

Is there a different option besides using the scale() function in CSS for transforming elements

It's a well-known fact that elements with the CSS property position: fixed don't behave as expected when the container has the transform property applied in CSS. After searching through various threads, I couldn't find a definitive solution ...

htmlangularjscss

Troubleshooting problem: Scrolling problem in IE7 and IE8 with Lightbox

The lightbox I'm using works flawlessly on all browsers, except for IE. When viewed on IE, it shows triple scroll bars. Here is the CSS code for the iframe: #wrap { float:left; width:800px; height:500px; overflow-x: hidden; overflow-y: scroll; } #co ...

jqueryhtmlcsslightbox