This is my react code. i wonder where i got it all wrong
import React, {useState } from "react"; import Inputs, { SelectInput } from "../../components/inputs/Inputs"; import Logo from "../../components/Logo/Logo"; import { StyledEditProfile } from "./StyledEditProfile"; import { Form, Formik } from "formik";
import axios from "axios"; import loadingSvg from "../../assets/img/loading.svg"; import { useLocation, useNavigate } from "react-router-dom" const EditProfile = () => { const [loading, setLoading] = useState(false); const location = useLocation() let
data = location.state?.data; const navigate = useNavigate(); const token = localStorage.getItem("user"); const onSubmit = async (values) => { try { setLoading(true) axios .post("http://localhost:5000/v1/auth/update_user", { ...values, }, { headers: {
authorization: `${token}`, } }) .then((response) => { setLoading(false) if (response.status === 200) { navigate("/dashboard/profile"); } }) .catch((err) => { setLoading(true) }); } catch (error) { } }; return (
<StyledEditProfile className="w-full bg-white ">
<div className="reg_con rounded my-10 p-8">
<div className="reg_logo flex flex-col items-center rounded">
<Logo />
</div>
<div className="err_msg my-8 text-center text-red-600">
</div>
<Formik initialValues={data} onSubmit={onSubmit}>
<Form action="" className="mt-2">
<div className="grid gap-4">
<div className="">
<Inputs type={ "text"} id={ "FirstName"} label={ "First Name"} name={ "first_name"} />
<div className="fr_erm">
</div>
</div>
<div className="">
<Inputs type={ "text"} label={ "Last Name"} id={ "LastName"} name={ "last_name"} />
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-2">
<div className="">
<Inputs type={ "text"} id={ "UserName"} label={ "Username"} name={ "username"} />
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-2">
<div className="">
<Inputs type={ "Email"} id={ "Email"} label={ "Email Address"} name={ "email"} />
<div className="fr_erm">
</div>
</div>
</div>
<div className="grid gap-4">
<div>
<SelectInput label={ "Country"} name={ "country"} type={ "listbox"} children={[ "Select a country", "Afghanistan", "Iland Islands", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Zimbabwe"]} />
<div className="fr_erm">
</div>
</div>
<div>
<Inputs label={ "State"} name={ "state"} type={ "text"} />
<div className="fr_erm">
</div>
</div>
<div>
<Inputs label={ "City"} name={ "city"} type={ "text"} id={ "City"} />
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-2">
<div className="">
<Inputs type={ "text"} id={ "Phone Number"} label={ "Phone Number"} name={ "phone"} />
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs type={ "text"} id={ "Account"} name={ "account"} label={ "Wallet Address"} />
<div className="fr_erm">
</div>
</div>
</div>
<div className="reg_btn flex justify-center mt-8">
<button type="submit" className="btn" to={ "/Profile"}>
Update Profile{" "}
{loading ? (
<img
srcSet={loadingSvg}
alt=""
className="inline"
/>
) : null}
</button>
</div>
</Form>
</Formik>
</div>
</StyledEditProfile>
); }; export default EditProfile;i am a newbiee to react and nodejs and i am trying to create a project where users can update their profile. Everything seeems to be working fine but when i make a change to a user information and click the update button it doesn't go through. Please come to my aid.
This is my react code
import React, {useState } from "react";
import Inputs, { SelectInput } from "../../components/inputs/Inputs";
import Logo from "../../components/Logo/Logo";
import { StyledEditProfile } from "./StyledEditProfile";
import { Form, Formik } from "formik";
import axios from "axios";
import loadingSvg from "../../assets/img/loading.svg";
import { useLocation, useNavigate } from "react-router-dom"
const EditProfile = () => {
const [loading, setLoading] = useState(false);
const location = useLocation()
let data = location.state?.data;
const navigate = useNavigate();
const token = localStorage.getItem("user");
const onSubmit = async (values) => {
try {
setLoading(true)
axios
.post("http://localhost:5000/v1/auth/update_user", {
...values,
}, {
headers: {
authorization: `${token}`,
}
})
.then((response) => {
setLoading(false)
if (response.status === 200) {
navigate("/dashboard/profile");
}
})
.catch((err) => {
setLoading(true)
});
} catch (error) {
}
};
return (
<StyledEditProfile className="w-full bg-white ">
<div className="reg_con rounded my-10 p-8">
<div className="reg_logo flex flex-col items-center rounded">
<Logo />
</div>
<div className="err_msg my-8 text-center text-red-600">
</div>
<Formik
initialValues={data}
onSubmit={onSubmit}
>
<Form action="" className="mt-2">
<div className="grid gap-4">
<div className="">
<Inputs
type={"text"}
id={"FirstName"}
label={"First Name"}
name={"first_name"}
/>
<div className="fr_erm">
</div>
</div>
<div className="">
<Inputs
type={"text"}
label={"Last Name"}
id={"LastName"}
name={"last_name"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-2">
<div className="">
<Inputs
type={"text"}
id={"UserName"}
label={"Username"}
name={"username"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-2">
<div className="">
<Inputs
type={"Email"}
id={"Email"}
label={"Email Address"}
name={"email"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="grid gap-4">
<div>
<SelectInput
label={"Country"}
name={"country"}
type={"listbox"}
children={["Select a country", "Afghanistan", "Iland Islands", "Albania", "Algeria",
"American Samoa", "Andorra", "Angola", "Bulgaria",
"Zambia", "Zimbabwe"]}
/>
<div className="fr_erm">
</div>
</div>
<div>
<Inputs
label={"State"}
name={"state"}
type={"text"}
/>
<div className="fr_erm">
</div>
</div>
<div>
<Inputs
label={"City"}
name={"city"}
type={"text"}
id={"City"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-2">
<div className="">
<Inputs
type={"text"}
id={"Phone Number"}
label={"Phone Number"}
name={"phone"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
type={"text"}
id={"Account"}
name={"account"}
label={"Wallet Address"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="reg_btn flex justify-center mt-8">
<button type="submit" className="btn" to={"/Profile"} >
Update Profile{" "}
{loading ? (
<img
srcSet={loadingSvg}
alt=""
className="inline"
/>
) : null}
</button>
</div>
</Form>
</Formik>
</div>
</StyledEditProfile>
);
};
export default EditProfile;import React, {useState } from "react";
import Inputs, { SelectInput } from "../../components/inputs/Inputs";
import Logo from "../../components/Logo/Logo";
import { StyledEditProfile } from "./StyledEditProfile";
import { Form, Formik } from "formik";
import axios from "axios";
import loadingSvg from "../../assets/img/loading.svg";
import { useLocation, useNavigate } from "react-router-dom"
const EditProfile = () => {
const [loading, setLoading] = useState(false);
const location = useLocation()
let data = location.state?.data;
const navigate = useNavigate();
const token = localStorage.getItem("user");
const onSubmit = async (values) => {
try {
setLoading(true)
axios
.post("http://localhost:5000/v1/auth/update_user", {
...values,
}, {
headers: {
authorization: `${token}`,
}
})
.then((response) => {
setLoading(false)
if (response.status === 200) {
navigate("/dashboard/profile");
}
})
.catch((err) => {
setLoading(true)
});
} catch (error) {
}
};
return (
<StyledEditProfile className="w-full bg-white ">
<div className="reg_con rounded my-10 p-8">
<div className="reg_logo flex flex-col items-center rounded">
<Logo />
</div>
<div className="err_msg my-8 text-center text-red-600">
</div>
<Formik
initialValues={data}
onSubmit={onSubmit}
>
<Form action="" className="mt-2">
<div className="grid gap-4">
<div className="">
<Inputs
type={"text"}
id={"FirstName"}
label={"First Name"}
name={"first_name"}
/>
<div className="fr_erm">
</div>
</div>
<div className="">
<Inputs
type={"text"}
label={"Last Name"}
id={"LastName"}
name={"last_name"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-2">
<div className="">
<Inputs
type={"text"}
id={"UserName"}
label={"Username"}
name={"username"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-2">
<div className="">
<Inputs
type={"Email"}
id={"Email"}
label={"Email Address"}
name={"email"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="grid gap-4">
<div>
<SelectInput
label={"Country"}
name={"country"}
type={"listbox"}
children={["Select a country", "Afghanistan", "Iland Islands", "Albania", "Algeria",
"American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua And Barbuda",
"Yemen", "Zambia", "Zimbabwe"]}
/>
<div className="fr_erm">
</div>
</div>
<div>
<Inputs
label={"State"}
name={"state"}
type={"text"}
/>
<div className="fr_erm">
</div>
</div>
<div>
<Inputs
label={"City"}
name={"city"}
type={"text"}
id={"City"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-2">
<div className="">
<Inputs
type={"text"}
id={"Phone Number"}
label={"Phone Number"}
name={"phone"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="mt-4">
<div className="">
<Inputs
type={"text"}
id={"Account"}
name={"account"}
label={"Wallet Address"}
/>
<div className="fr_erm">
</div>
</div>
</div>
<div className="reg_btn flex justify-center mt-8">
<button type="submit" className="btn" to={"/Profile"} >
Update Profile{" "}
{loading ? (
<img
srcSet={loadingSvg}
alt=""
className="inline"
/>
) : null}
</button>
</div>
</Form>
</Formik>
</div>
</StyledEditProfile>
);
};
export default EditProfile;