ReactJS - After .setState called successfully other properties become undefined

Question

I set up an app which has an input box and a title. The title input changes onChange which updates the title shown. The state is an object with an array {title:[{title: 'Welcome', feature: 'test'}] , I successfully setState for title, but feature then becomes unknown. See code:

APP.JS

import React from "react";
import Header from "./Header";

export default class Layout extends React.Component {
  constructor() {
    super();
    this.state = {
      title: [{
        title: 'Welcome',
        feature: 'test'
      }]
    };
  }

  changeTitle(titleChange) {
    this.setState({title: [{title: titleChange }]});
  }

  render() {
    return (
      <div>
        <Header changeTitle={this.changeTitle.bind(this)} title={this.state.title[0].title} feature={this.state.title[0].feature} />
      </div>
    );
  }
}

HEADER.JS

import React from "react";
import Title from "./Header/Title";

export default class Header extends React.Component {
  handleChange(e) {
    const title = e.target.value;
    console.log(e, title);
    this.props.changeTitle(title);
  }

  render() {
    console.log(this.props.title) //This test Works
    console.log(this.props.feature) //This test Works
    return (
      <div>
        <Title title={this.props.title} />
        <h4> Feature Here: {this.props.feature} </h4> //This disappears after I change input
        Title Here: <input value={this.props.title} onChange={this.handleChange.bind(this)} />
      </div>
    );
  }
}

TITLE.JS

import React from "react";

export default class Title extends React.Component {
  render() {
    return (
      <h1>{this.props.title}</h1>
    );
  }}

So app.js is main, header.js is parent, and title.js is child (If I understand correctly).

After I change, title because the new title, but feature becomes undefined. Any idea what's wrong? I might need to use componentWillUpdate but I'm not fully sure how I would.

Answer 1

It's because when you setState you're replacing the title array wholesale with only the inner title property, not feature. Unless you have a specific reason for having such a complicated state I think you should make it less problematic by just using an object:

this.state = { title: 'Welcome', feature: 'test' };

Then set the state:

changeTitle(titleChange) {
  this.setState({ title: titleChange });
}

And build your Header:

<Header
  changeTitle={this.changeTitle.bind(this)}
  title={this.state.title}
  feature={this.state.feature}
/>

If you can't change the structure of your state for whatever reason give the following a go:

  this.setState(Object.assign({}, this.state.title[0], { title: titleChange }));

There's probably a more concise way of writing that without Object.assign, but I can't test it properly. The above code, however, does work.

Edit

This should do the trick:

this.setState({ ...this.state.title[0], title: 'a' });

Answer 2

When you are running your set state, you are only specifying your title, not the rest of the properties so they are being set to undefined.

Using the spread operation can help with this (if you have access to it).

this.setState((prevState, props) => {
  return {...prevState, title: [{title: titleChange }]};
});

If not, be sure to include all the other values in the object you set on the state.