how to change an UseStatus targeting an axios post reponse?

Question

I'm back once more with something that has been breaking my head today.

so I'm making a contact form is almost done except for an animation I want to include that comes in three steps.

1- prompting the user to contact 2-making the waiting for the user-friendlier with a small loader 3-showing either everything went good and the form was sent or something went wrong

so my idea to accomplish this was to use three different icons/loaders and position all of them on top of each other and make them visible or hide them as necessary using UseState.

for now, I can hide the first icon(from step one) as soon as the submit button is clicked, but I haven't been able to make appear the loader or as the API completes the response the last icon

wondering if I should access it any other way?

import styled from "styled-components";
import { RiMailSendFill,FcApproval } from 'react-icons/all';
import '../../Style/styleComponents/Style.css';
import {sendMessage} from '../../Actions/msgAction';
import { useDispatch, useSelector } from 'react-redux';
import { useForm } from "../../Hook/useForm";

const ContactForm = () => {
const dispatch = useDispatch();
const initFormValues =
{
  nombre : "nico ",
  email : "sasjaja@asdsa ",
  telefono : "asda ",
  empresa : "dasd",
  mensaje : "dasdas",
  date: "s"

}


const[formValues, handleInputChange, reset] = useForm(initFormValues);
const{nombre, email, telefono, empresa, mensaje} = formValues

//loader submit buttons
const[mail, setMail]= useState(true);
const[loading, setLoading]= useState(false);
const[approved, setApproved]= useState(false);
 

  const handleSendMsg = ( event ) =>
  {
    event.preventDefault();
    dispatch( sendMessage( formValues ) )
    .then( ( result ) => 
        {
            if( result )
            {   
              console.log(initFormValues);
                //closeModal();
                console.log('dat')
            };
            setLoading(true);        
        });
        reset();
  }

const showE =()=> {

  if (mail) {
    setMail(false)
    setLoading(true)
    console.log("pressed submit"); 
 }
}
const showL=()=>{
  if (loading) {
    setLoading(false)
    console.log("sending email ");
  }
}

  return (

      <Container>
        <Left>
          <h1>Tráenos tus desafíos</h1>
        </Left>
        <Right>
    <form onSubmit={ handleSendMsg }>
      <Label>
        <Linput> 
      <Name>
        <label htmlFor="name">Nombre:</label>
        <input type="text" id="name" required name="nombre" value={ nombre } onChange={ handleInputChange } />
      </Name>
      <Tel>
        <label htmlFor="name">Telefono:</label>
        <input type="text" id="phone" required name="telefono" value={ telefono } onChange={ handleInputChange }  />
      </Tel>
      <Company>
      <label htmlFor="company">Empresa:</label>
      <input type="text" id="company" name="empresa" value={ empresa} onChange={ handleInputChange }/>
      </Company>
      </Linput>
      <Rinput>
      <Email>
        <label htmlFor="email">E-mail:</label>
        <input type="email" id="email" required  name="email" value={ email } onChange={ handleInputChange }/>
      </Email>
      <Msg>
        <label htmlFor="message">Mensaje:</label>
        <textarea id="message" required name="mensaje" rows="8" cols="50" value={ mensaje } className="bigger" onChange={ handleInputChange }/>
      </Msg>
      </Rinput>
      </Label> 
      <Button>
      <Send>
      <button   type="Submit"  id ="submit" onClick={showE, showL}>Enviar</button>
      </Send>
      <Sent>
      <RiMailSendFill  id="mail" className={ mail ? 'svg': "svg active"}/>
      <Loader   className={ loading ? 'spin': "spin active"}>
      <div class="spin"></div>
      </Loader>
      {/* <FcApproval id= "approve" className={ approved ? 'approve': "approve active"}/> */}
      </Sent>
      </Button>
    </form>
    </Right>
    </Container>
  );

};

export default ContactForm;

thanks, yall always saving me!

Answer 1

Hey in case someone comes across something like this, there are ways to make states work with each other easiest way is like this.

---

```

1- useStates for each of the elements you want to be able to switch states to.

const [mail, setMail] = useState(true);
const [approved, setApproved] = useState(false);
        

2 Main function with smaller functions, for each one to change accordingly.

function showL( ){
        
setMail(false);
if(!mail){
return setApproved(true);
}
}
        
//hide mailIcon / show approve
function showA( ){
            
setApproved(true);
if(approved){
return setMail(false);
}
}

add an event listener to the specific the element you will work with to trigger the changes, here you pass the MAIN FUNCTION.

<Button>
<Send>
<button type="Submit" id="submit" onClick={() => {showL(); showA();}}>
Enviar
</button>
</Send>

TERNARY EXPRESION if true, render element and false null

<Sent>
<EMail>
{mail ? <RiMailSendFill/> : null}
</EMail>
<Loader>
{approved ? <FcApproval/>: null}
</Loader>
</Sent>
</Button>``` 

---