React-Js - Making POST request using useEffect and

Question

I am new in React-Js,I have a register page that i want to send a Post request to my backend . UseState is working andeverything else,my method is handleSubmit .How do is use useEffect from here either by using axios or fetch?

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [passowrd, setPassowrd] = useState('');
 
 const handleSubmit = e => {
  e.preventDefault();
  }

 return (
    <form className={classes.form} noValidate onSubmit={handleSubmit}>
    </>
  )

Why do you want to use useEffect? Isn't the trigger condition "When the form is submitted"? — Quentin
– Quentin, Commented Apr 13, 2021 at 17:13
I was searching online and i saw a lot of guys using that ,i am open for any answer — waithira
– waithira, Commented Apr 13, 2021 at 17:16
is it mandatory to use useEffect for making api call ? you can make api call in handleSubmit function itself. — Shailendra Sahu
– Shailendra Sahu, Commented Apr 13, 2021 at 17:17

Alexander Gordon · Accepted Answer · 2021-04-13 17:17:59Z

5

You don't need to use the useEffect Hook, as you are not performing it on component load/change. instead use async/promise with function handleSubmit

export default function SignUp() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [passowrd, setPassowrd] = useState('');

  const handleSubmit = async () =>{ 
    const res = await axios.post('YOUR BACKEND',{
    username,email,password
    })
  }
  
  //remember to handle change for form inputs
 return (
    <form className={classes.form} noValidate onSubmit={handleSubmit}>
    </>
  )

answered Apr 13, 2021 at 17:17

Alexander Gordon

1393 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Js - Making POST request using useEffect and

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related