CODEWITHSUNDEEP
javascriptnode.jsreactjs
ICT BANDARIGODA
ICT BANDARIGODA

Reputation: 13

How can i Show Back-End response in react?

How can I show the response of the following request?

function Submit(e) {
    e.preventDefault();
    axios
      .post(url, {
        email: data.email,
        password: data.password,
        confirmpassword: data.confirmpassword,
        first_name: data.first_name,
        last_name: data.last_name,
        mobile: data.mobile,
        birthday: data.birthday,
        gender: data.gender,
        profession: data.profession,
      })
      .then((res) => {
        console.log(res.data);
      });
  }

Upvotes: 1

Views: 113

Answers (1)

David S
David S

Reputation: 442

Use the 'state' hook to hold your data. When it gets updated, it automatically updates the clients state (screen/gui).

If you want to run the code as soon as the page loads, use it in an effect hook.

import React, { useEffect, useState } from 'react';

export default function YourComponent() {

  const [yourObject, setYourObject] = useState({});

//optional
 useEffect({
    getData(null);
 },[]);
 
  function getData(e) {
    if(e)
      e.preventDefault();

    axios.post(url,
      {
        email: data.email,
        password: data.password,
        confirmpassword: data.confirmpassword,
        first_name: data.first_name,
        last_name: data.last_name,
        mobile: data.mobile,
        birthday: data.birthday,
        gender: data.gender,
        profession: data.profession,
      })
      .then((res) => {
        setYourObject(res.data)
      });
  }

  return (
   <div>
     <button onClick={e=>getData(e)}>
        Get Data
     </button>
    {if(Object.keys(yourObject).length > 0) &&
      <h1>First Name: </h1><p>{yourObject.first_name}</p>
      <h1>Last Name: </h1><p>{yourObject.last_name}</p>
      <h1>Birthday: </h1><p>{yourObject.birthday}</p>
      {/* ...etc. */}
    }
   </div>
  )
}

Upvotes: 1

Related Questions