Need help modifying a UseStatus to target an axios post response efficiently?

Question

Need help modifying a UseStatus to target an axios post response efficiently?

Hey there, back again with a head-scratcher I've been dealing with all day.

Almost done with a contact form, just stuck on an animation concept that involves three steps:

1. Prompting the user to contact

2. Making the waiting process user-friendly with a small loader

3. Displaying either a success message or an error message after form submission

My idea to achieve this involves using three different icons/loaders stacked on top of each other, toggling their visibility with UseState based on the step.

I can currently hide the initial icon as soon as the submit button is clicked, but struggling to show the loader during the API response and the final icon at the end.

Any suggestions on a different approach I should take?


      (Code snippet provided with styled components, form handling, and icon loaders)

Appreciate the help as always!

javascript css reactjs axios use-state

Answer 1

Answer №1

If you want to facilitate communication between states, follow these steps:

1-Create individual states for each element that needs to switch states:

const [email, setEmail] = useState(true);
const [approval, setApproval] = useState(false);

2- Define a main function that includes smaller functions to handle state changes:

function showEmail(){
        
setEmail(false);
if(!email){
return setApproval(true);
}
        
}

// Switch from email icon to approval icon
function showApproval(){
            
setApproval(true);
if(approval){
return setEmail(false);
}
}

Add an event listener to the specific element that triggers the changes, and call the functions within it:

<Button>
<Send>
<button type="submit" id="submit" onClick={() => {showEmail(); showApproval();}}>
Send
</button>
</Send>

Use a ternary expression to render elements based on the state:

<Sent>
<EMail>
{email ? <RiMailSendFill/> : null}
</EMail>
<Loader>
{approval ? <FcApproval/> : null}
</Loader>
</Sent>
</Button>

Answer 2

If you want to facilitate communication between states, follow these steps:

1-Create individual states for each element that needs to switch states:

const [email, setEmail] = useState(true);
const [approval, setApproval] = useState(false);

2- Define a main function that includes smaller functions to handle state changes:

function showEmail(){
        
setEmail(false);
if(!email){
return setApproval(true);
}
        
}

// Switch from email icon to approval icon
function showApproval(){
            
setApproval(true);
if(approval){
return setEmail(false);
}
}

Add an event listener to the specific element that triggers the changes, and call the functions within it:

<Button>
<Send>
<button type="submit" id="submit" onClick={() => {showEmail(); showApproval();}}>
Send
</button>
</Send>

Use a ternary expression to render elements based on the state:

<Sent>
<EMail>
{email ? <RiMailSendFill/> : null}
</EMail>
<Loader>
{approval ? <FcApproval/> : null}
</Loader>
</Sent>
</Button>

Need help modifying a UseStatus to target an axios post response efficiently?

Answer №1

Similar questions

What is the best way to horizontally replace buttons in a Navbar?

Maintain the menu item color even after clicking

Unlocking two features with just a single tap

Setting a global variable in the JavaScript code below

What is the best way to merge two AngularJS form validation directives criteria using CSS?

What is the best way to incorporate modules into the client side of TypeScript projects?

Is there a way to update a variable in a controller using AJAX?

Beginning external plugin in Angular 4 application

Steps to simulate a TouchEvent programmatically using TypeScript

What is the process for implementing JavaScript in Django?

Utilizing local storage within the useEffect dependency can be effective, although it may trigger a warning

Develop a feature or method in your code that allows for the display of the specified table column based on user interaction

Is it possible to use vanilla JavaScript scroll event with AngularJS framework?

JavaScript: employing a for loop as a variable declaration

Retrieve all the items listed in the markdown file under specific headings

Image renders only on a single page in Express.js

Is NodeJS primarily used as a socket library for network communication?

Numerous overlay triggers

Extracting information from AJAX calls using a DataTable

A method for automatically refreshing a webpage once it switches between specific resolutions