Trying to edit data using react

Question

I am very confused about a problem I am trying to solve. I am able to render data on the page using React, but I want to be able to change the values when an edit button is clicked. I am prompting the user for new data when the button is clicked and I want the new data to replace the old data on the page. The editItem function is where I am attempting to do this. Any suggestions on how to solve this would be extremely helpful.

const NewProduct = React.createClass({
  render: function() {
    return (
        <section>
           <div>Name: {this.props.name}</div>
           <div>Price: {this.props.price}</div>
           <div>Category: {this.props.category}</div>
           <button className="deleteButton" onClick={this.deleteItem}>Delete</button>
           <button className="editButton" onClick={this.editItem}>Edit</button>
         </section>
    );
  },

  deleteItem: function() {
        console.log(this.props.id);
        this.props.product.destroy();
    },

  editItem: function() {
    var name = prompt('What should the new name be?');
    <div>Name: {this.name.value}</div>
  }

});

export default NewProduct;

Answer 1

You can make use of the local state and life cycle method to achieve this.

const NewProduct = React.createClass({
      constructor(props) {
        super(props);
        const entity = {
            name: '',
            price : '',
            category: '',
         };
        this.state = {
          entity : entity
         };
       }

       componentWillReceiveProps(newProps){
         const entity = newProps.props;
         const entity = {
            name: entity.name,
            price : entity.price,
            category: entity.category,
         };
         this.setState({
           entity: entity
          });
        }

      render: function() {
        const entity = this.state.entity;
        return (
            <section>
               <div>Name: {entity.name}</div>
               <div>Price: {entity.price}</div>
               <div>Category: {entity.category}</div>
               <button className="deleteButton" onClick={this.deleteItem}>Delete</button>
               <button className="editButton" onClick={this.editItem}>Edit</button>
             </section>
        );
      },

      deleteItem: function() {
            console.log(this.props.id);
            this.props.product.destroy();
        },

      editItem: function() {
        var name = prompt('What should the new name be?');
        // here you need to just update the state based on the promt values or use a callback function passing the values and update the state.
      }

    });

    export default NewProduct;

Answer 2

There are two approaches you can take for this.

Update props

You are currently always rendering the name based on the this.props.name value. If you'd like to update this, you'd have to notify your parent component when the value should update, and then have the parent component pass the new prop value back down to the child.

Example

editItem: function() {
  var name = prompt('What should the new name be?');
  /* 
    handleNewName would be a function passed in as a prop from the parent component. 
    It will then be on the parent component to update the name, and pass in
    the updated name as a prop, which will trigger a re-render and update the
    value on the child NewProduct component.
  */
  this.props.handleNewName(name);
 }

Introduce state

The second way you can handle this is to introduce local state into this component.

Example

const NewProduct = React.createClass({
  getInitialState: function () {
     // Get initial value from props.
     return {
       name: this.props.name
     }
  },
  render: function() {
    return (
        <section>
           <div>Name: {this.state.name}</div>
           <div>Price: {this.props.price}</div>
           <div>Category: {this.props.category}</div>
           <button className="deleteButton" onClick={this.deleteItem}>Delete</button>
           <button className="editButton" onClick={this.editItem}>Edit</button>
         </section>
    );
  },

  deleteItem: function() {
     this.props.product.destroy();
  },

  editItem: function() {
    var name = prompt('What should the new name be?');
    this.setState({ name })
  }

});

export default NewProduct;