i am developing an application i.e supply chain management application on reactJS, NodeJS and blockchain. Frontend code:

import React, { Component } from 'react'
import { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate } from 'react-router-dom';



const SignUp = () =>  {

    const navigate = useNavigate();
 const flag=0;
    const [data, setData] = useState({
        uname: "",
        email: "",
        location: "",
        budget: "",
        password: ""
      });
    
      const handleChange = (e) => {
        const value = e.target.value;
        setData({
          ...data,
          [e.target.name]: value
        });
      };
    
      const handleSubmit = (e) => {
        e.preventDefault();
        const userData = {
          
            uname: data.uname,
            email: data.email,
            location: data.location,
            budget: data.budget,
            password: data.password
        };
        axios
          .post("http://localhost:8080/api/signup/", userData)
          .then((response) => {
            console.log(response);
          })
          .catch((error) => {
            if (error.response) {
              console.log(error.response);
              console.log("server responded");
            } else if (error.request) {
              console.log("network error");
            } else {
              console.log(error);
            }
          });
          navigate(`/home`)
   

      };
      

  
    return (
      <form>
        <h3>Sign Up</h3>
        <div className="mb-3">
          <label>User Name</label>
          <input
            type="text"
            name="uname" 
            value={data.uname}
            className="form-control"
            placeholder="User name"
            onChange={handleChange}
          />
        </div>

        <div className="mb-3">
          <label>Email address</label>
          <input
            type="email"
            name="email" 
            value={data.email}
            className="form-control"
            placeholder="Enter email"
            onChange={handleChange}
          />
        </div>
        <div className="mb-3">
          <label>Location</label>
          <input
            type="text"
            name="location" 
            value={data.location}
            className="form-control"
            placeholder="Location"
            onChange={handleChange}
          />
        </div>
        <div className="mb-3">
          <label>Budget</label>
          <input
            type="Number"
            name="budget" 
            value={data.budget}
            className="form-control"
            placeholder="Budget"
            onChange={handleChange}
          />
        </div>
        <div className="mb-3">
          <label>Password</label>
          <input
            type="password"
            name="password" 
            value={data.password}
            className="form-control"
            placeholder="Enter password"
            onChange={handleChange}
          />
        </div>
        <div className="d-grid">
          <button type="submit" onClick={handleSubmit}className="btn btn-primary">
            Sign Up
          </button>
        </div>
        <p className="forgot-password text-right">
          Already registered <a href="/sign-in">sign in?</a>
        </p>
      </form>
    );
    
};
export default SignUp;

here if user successfully registered then i want to show deatils of the user on the same page. how should i do that? i have attached the code and the screenshot of the page. currently i am on my account page.

CodePudding user response：

Inside of your handle submit You can just navigate after the axios.then callback

Or if you want the behavior to be that user submits -> register success -> show success -> then redirect, you can setTimeout for say 1000ms and then navigate.

axios
          .post("http://localhost:8080/api/signup/", userData)
          .then((response) => {
            console.log(response);
          })
          .then(() => {
            setTimeout(() => navigate(`/home`), 1000);
          }
          .catch((error) => {
            if (error.response) {
              console.log(error.response);
              console.log("server responded");
            } else if (error.request) {
              console.log("network error");
            } else {
              console.log(error);
            }
          });

CodePudding user response：

If you mean, show the user data after a successful registration and assuming you're calling an api to register the user and you're getting the user details back on success, you can handle that in your handleSubmit method.

Here's an example

const showUserDetails = (userDetails) => {
// Code that shows user details
// Probably using state
};

const handleSubmit = (e) => {
        e.preventDefault();
        const userData = {
          ...
      axios
          .post("http://localhost:8080/api/signup/", userData)
          .then((response) => {
             // handle here
             showUserDetails(response);
          })
         

          .catch((error) => {
            if (error.response) {
              ...
            } else {
              console.log(error);
            }
          });

      };