Updates nested value in React State

Question

I am using React/Redux for my web-app and I have the Description Class where user can edit description. Props description and propertyTypes are coming from AJAX calls.

import React, { PropTypes } from 'react';

const defaultDescription = {
  about_you: '',
  benefits: '',
  description: '',
  headline: '',
  no_of_guests: 0,
  property_name: '',
  property_type: {
    id: 1,
    name: 'Apartment',
  },
};
class Description extends React.Component {
  static propTypes = {
    description: PropTypes.object,
    propertyTypes: PropTypes.array,
  };
  constructor(props) {
    super(props);
    this.state = {
      description: defaultDescription,
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.propertyTypeChanged = this.propertyTypeChanged.bind(this);
    this.updateDescription = this.updateDescription.bind(this);
  }
  // componentWillMount() {
  //   if (!this.props.description) {
  //     this.setState({
  //       description: defaultDescription,
  //     });
  //   }
  // }
  componentWillReceiveProps(nextProps) {
    if (nextProps && nextProps.description && nextProps.propertyTypes) {
      const newDescription = nextProps.description.description ? merge(defaultDescription, nextProps.description) : merge(nextProps.description, defaultDescription);
      this.setState({
        description: newDescription,
      });
    }
  }
  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      description[name]: value // <---- I want to update my state here
    });
  }
  updateDescription(event) {
    event.preventDefault();
    console.log(this.state);
  }
  render() {
    
    return (
      <form name="descriptionForm" onSubmit={this.updateDescription}>
        
        <input name="no_of_guests" value={this.state.description.no_of_guests} onChange={this.handleInputChange} /><br />
        <input name="property_name" value={this.state.description.property_name} floatingLabelText="Property Name" onChange={this.handleInputChange} /><br />
        <input name="headline" value={this.state.description.headline} floatingLabelText="Headline" onChange={this.handleInputChange} /><br />
        <input name="summary" value={this.state.description.summary} floatingLabelText="Summary" onChange={this.handleInputChange} /><br />
        <input name="description" value={this.state.description.description} floatingLabelText="Description" onChange={this.handleInputChange} /><br />
        <input name="about_you" value={this.state.description.about_you} floatingLabelText="About You" onChange={this.handleInputChange} /><br />
        <input name="why" value={this.state.description.why} floatingLabelText="Why ?" onChange={this.handleInputChange} /><br />
        <input name="benefits" value={this.state.description.benefits} floatingLabelText="Benefits" onChange={this.handleInputChange} /><br />
        <button value="Save" type="submit" />
      </form>
    );
  }
}
export default Description;

I want to update the form but whenever the onChange event is fired , I can not update the state, and Input field is not changed.

How do I handle this case. Any help would be appreciated.

Thanks.

Tholle · Accepted Answer · 2017-01-26 12:09:56Z

3

You could write the update like this:

const desc = Object.assign({}, this.state.description);
desc[name] = value;
this.setState({
  description: desc
});

edited Jan 26, 2017 at 12:09

answered Jan 26, 2017 at 11:58

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joe Clay Over a year ago

It's probably worth mentioning that computed property names are an ES2015 feature and aren't supported in IE. Admittedly, 99.9% of React devs are probably using a transpiler and so won't need to worry about this, but still :)

Joe Clay Over a year ago

And if there is that 0.01% out there not using a transpiler: var newState = { description: {} }; newState.description[name] = value; this.setState(newState);

Shankar Regmi Over a year ago

@Tholle you are directly assigning const desc = this.state.description. It will reference your object and mutate. It's Anti-Pattern and should be avoided

Shankar Regmi · Accepted Answer · 2017-01-26 12:06:13Z

2

This is how I would update in your case

const newState = {...this.state.description};
newState[name] = value;
this.setState({
  description: newState,
});

Input elements should not switch from controlled to uncontrolled (or vice versa) [[https://facebook.github.io/react/docs/forms.html#controlled-components]]

answered Jan 26, 2017 at 12:06

Shankar Regmi

8841 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

Updates nested value in React State

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related