Question

-6

Need to have the user be able to edit profile with an edit button

rated 0 times [ 1] [ 7] / answers: 1 / hits: 5948 / 4 Years ago, sun, november 29, 2020, 12:00:00

I am working on a project and creating a website. the feature i am working on right now is the profile page for the user. i need to be able to have an edit button in the page that will allow the user to edit their name, username, email, and update password. The following is the code i have but i am unsure how to make everything work.

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

import {useHistory} from "react-router-dom";

import axios from "axios";



const ProfilePage = () => {

    const [user, setUser] = useState({});

    const [sessionUrl,] = useState("/api/sessions/me");

    const history = useHistory();



    useEffect(() => {

         (async () => {

            try {

                const response = await axios.get(sessionUrl);

                setUser(response.data);

            } catch (err) {

                history.push({

                    pathname: "/account/login"

                });

            }

        })();

     }, []);



     return (

         <div>

             <div>Name: {user.displayName}</div>

             <div>Username: {user.username}</div>

             <div>Email: {user.email}</div>

         </div>

    );

 }



export default ProfilePage;

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rayvenc

Add To Favorites

Follow

Total Points: 666

Total Questions: 125

Total Answers: 99

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

rayvenc questions

1 How do I implement a Logout functionality from a React Router Link to imports an array?

Wed, Mar 16, 22, 00:00, 2 Years ago

1 Accessing Props from React Ref Object

Tue, Apr 21, 20, 00:00, 4 Years ago

1 Nuxt.js + vuetify image not loading

Mon, Apr 13, 20, 00:00, 4 Years ago

1 Pass object to query on Router.push NextJs

Sun, Mar 1, 20, 00:00, 4 Years ago

1 How to move search icon of search-bar at right side of search bar in ionic 4

Wed, Feb 5, 20, 00:00, 4 Years ago

View All

answered 4 Years ago tylor · Accepted Answer

If you want to edit informations, what you should do is to provide a edit form with the users prefilled fields.Here is something very simple that i've created for you in Codesandbox.

Input.js for input field component

import React from "react";



export default ({ placeholder, type, value, handleInput, name }) => {

  return (

    <input

      type={type}

      name={name}

      value={value}

      onChange={handleInput}

      placeholder={placeholder}

    />

  );

};

For the EditForm component i've worked with some fake data from http://jsonplaceholder.typicode.com/ website to have some data to populate form.

In useEffect hook fetch some data from http://jsonplaceholder.typicode.com/users/1 to fetch a single ressource to populate the following form

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

import Input from "./Input";

import axios from "axios";

import "./styles.css";



const INITIAL_STATE = {

  id: 0,

  name: "",

  email: ""

};

export default function App() {

  const [user, setUser] = useState(INITIAL_STATE);

  useEffect(() => {

    (async () => {

      try {

        const user = await axios.get(

          "https://jsonplaceholder.typicode.com/users/1"

        );

        setUser(user.data);

      } catch (error) {

        console.log(error);

      }

    })();

  }, []);



  const handleInput = (e) => {

    console.log(e.target.name, " : ", e.target.value);

    setUser({ ...user, [e.target.name]: e.target.value });

  };



  const handleSubmit = async (e) => {

    e.preventDefault();

    try {

      console.log("Data for update : ", user);

      const response = await axios.put(`https://yourendpoint/${user.id}`, user);

    } catch (error) {

      console.log(error);

    }

  };

  return (

    <div className="App">

      <h1>{user.name}</h1>

      <form onSubmit={handleSubmit}>

        <Input

          name="name"

          type="text"

          value={user.name}

          placeholder={"Your names"}

          handleInput={handleInput}

        />

        <br />

        <Input

          name="email"

          type="email"

          value={user.email}

          placeholder={"Your email"}

          handleInput={handleInput}

        />

        <br />

        <input type="submit" value="Update" />

      </form>

    </div>

  );

}

The input fields change onChange listener is handled by a method in the parent component component EditForm to update state with new data.Once the user click the update button there is a handleSubmit methode that is called by the onSubmit event listener from the form JSX tag.For data i've not created a complete form with all the data coming form the jsonplaceholder server for example purposes.

For the submit action,you only have to call the put method with whatever ajax library that you're using.

Here s the sandbox link : https://codesandbox.io/s/blissful-dirac-rboiy

I hope it helped