// nav/Sidebar.js
<li className="nav-item">
<NavLink className="nav-link" to="/user/profile">
Update Profile
</NavLink>
</li>
To create unique usernames that can be used as slug to display user public profile, use slugify
from npm
npm i slugify
// pages/user/Profile.js
import Sidebar from "../../components/nav/Sidebar";
import ProfileUpdate from "../../components/forms/ProfileUpdate";
export default function Profile() {
return (
<div className="contaienr-fluid">
<Sidebar />
<div className="container mt-2">
<ProfileUpdate />
</div>
</div>
);
}
// import in App.js
<Route path="user/profile" element={<Profile />} />
// components/forms/ProfileUpdate.js
import { useState, useEffect } from "react";
import { useAuth } from "../../context/auth";
import axios from "axios";
import toast from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import slugify from "slugify";
import ProfileUpload from "./ProfileUpload";
// gets prop from main nav
export default function ProfileUpdate() {
// context
const [auth, setAuth] = useAuth();
// state
// username name email company address phone about
const [username, setUsername] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [company, setCompany] = useState("");
const [address, setAddress] = useState("");
const [phone, setPhone] = useState("");
const [about, setAbout] = useState("");
const [loading, setLoading] = useState(false);
const [photo, setPhoto] = useState(null);
const [uploading, setUploading] = useState(false);
// hooks
const navigate = useNavigate();
useEffect(() => {
if (auth.user) {
setUsername(auth.user?.username);
setName(auth.user?.name);
setEmail(auth.user?.email);
setCompany(auth.user?.company);
setAddress(auth.user?.address);
setPhone(auth.user?.phone);
setAbout(auth.user?.about);
setPhoto(auth.user?.photo);
}
}, [auth.user]);
const handleSubmit = async (e) => {
e.preventDefault();
try {
console.log(username, name, email, company, address, phone, about, photo);
} catch (err) {
console.log(err);
}
};
return (
<div className="container">
<div className="row">
<div className="col-lg-8 offset-lg-2 mt-1">
<form onSubmit={handleSubmit}>
<div className="d-flex justify-content-between">
<label htmlFor="">
Username <small>Must be unique</small>
</label>
</div>
<input
name="username"
type="text"
placeholder="Update your username"
className="form-control mb-4"
value={username}
onChange={(e) =>
setUsername(slugify(e.target.value.toLowerCase()))
}
/>
<input
type="text"
placeholder="Enter your name"
className="form-control mb-4"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="text"
placeholder={email}
className="form-control mb-4"
disabled={true}
/>
<input
type="text"
placeholder="Enter your company name"
className="form-control mb-4"
value={company}
onChange={(e) => setCompany(e.target.value)}
/>
<input
type="text"
placeholder="Enter address"
className="form-control mb-4"
value={address}
onChange={(e) => setAddress(e.target.value)}
/>
<input
type="text"
placeholder="Enter your phone number"
className="form-control mb-4"
value={phone}
onChange={(e) => setPhone(e.target.value)}
/>
<textarea
placeholder="Write something interesting about yourself"
className="form-control mb-4"
value={about}
onChange={(e) => setAbout(e.target.value)}
/>
<button className="btn btn-primary col-12 mb-4" disabled={loading}>
{loading ? "Processing..." : "Update profile"}
</button>
</form>
</div>
</div>
</div>
);
}
// App.js
<Route path="user/profile" element={<ProfileUpdate />} />