CODEWITHSUNDEEP
reactjs
maxwellgover
maxwellgover

Reputation: 7111

Updating User Profile Info Client Side In React

So I want to allow users to automatically update their profile information client side in React (Similar to how Medium, if anyone is familiar). When I click the edit button, it would allow me to edit the name, bioText, and image state. Is there a good way to handle this? The code is below. 

// Main Profile Container 

var ProfileContainer = React.createClass({
  render: function () {
    return (
      <div>
        <ProfileHeader {...this.props} />
        <ProfileCollection {...this.props} />
      </div>
    );
  }
});

// Profile Header Container 

var ProfileHeader = React.createClass({
  render: function () {
    return (
      <div>
        <ProfilePicContainer {...this.props} />
        <ProfileNameContainer {...this.props} />
        <ProfileBioContainer />
        <EditProfileButtonContainer />
      </div>
    );
  }
});

// Profile Collection

var ProfileCollection = React.createClass({
  render: function () {
    return (
      <h1>Collection Container</h1>
    );
  }
});

// Profile Pic Component 

var ProfilePicContainer = React.createClass({
  getInitialState: function () {
    return {
      image: this.props.user.userImage
    }
  },
  render: function () {
    return (
      <ProfilePic {...this.props} />
    );
  }
});

var ProfilePic = React.createClass({
    render: function () {
      return (
        <img src={this.props.user.userImage} alt="profile-picture" />
      );
    }
 });

 // Profile Name Component

 var ProfileNameContainer = React.createClass({
    getInitialState: function () {
      return {
        name: this.props.user.userName
      }
    },
    render: function () {
      return (
        <ProfileName {...this.props} /> 
      );
    }
 });

 var ProfileName = React.createClass({
    render: function () {
      return (
        <h2>{this.props.user.userName}</h2> 
      );
    }
 });

 // Profile Bio Component 

 var ProfileBioContainer = React.createClass({
    getInitialState: function () {
      return {
        bioText: ""
      }
    },
    render: function () {
      return (
        <ProfileBio bioText={this.state.bioText} />
      );
    }
 });

 var ProfileBio = React.createClass({
    render: function () {
      return (
        <p>{this.props.bioText}</p> 
      );
    }
 });

 // Edit Profile Button 

var EditProfileButtonContainer = React.createClass({
  updateInfo: function () {
    // Code 
  },
  render: function () {
    return (
      <EditProfileButton updateInfo={this.updateInfo}/>  
    );
  }
});

var EditProfileButton = React.createClass({
  render: function () {
    return (
      <button onClick={this.props.updateInfo}>Edit</button>
    );
  }
});

 var user = {
   userName: "Maxwell Gover",
   userImage: "https://addons.cdn.mozilla.net/user-media/userpics/0/0/45.png?modified=1447324257"
 };

 ReactDOM.render(<ProfileContainer user={user} />, document.getElementById('content'));

Upvotes: 3

Views: 7988

Answers (1)

webdeb
webdeb

Reputation: 13211

You would like to implement an inline-editing feature.

You could do it by yourself:

When user clicks the edit button, your profile info view renders as a form with the values and when you have finished editing (e.g click on Save) your form switches to the view again.

However, there are also components for this like this one (did't tried it, but maybe it helps)

https://www.npmjs.com/package/react-edit-inline

Upvotes: 2

Related Questions