CODEWITHSUNDEEP
javascriptreactjsredux
Anonymous Zombie
Anonymous Zombie

Reputation: 889

Updates nested value in React State

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.

Upvotes: 1

Views: 701

Answers (2)

Tholle
Tholle

Reputation: 112807

You could write the update like this:

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

Upvotes: 3

Shankar Regmi
Shankar Regmi

Reputation: 874

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]]

Upvotes: 2

Related Questions