React.js: Why child component change parent state?

Question

Why in this example child component changing parent component state? According to the Facebook(react.js) docs State is similar to props, but it is private and fully controlled by the component.

codepen example

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {data: this.props.data};
  }

  handleChange(event) {
    let updatedData = Object.assign({}, this.state.data);
    updatedData[event.target.name][event.target.dataset.lang] = event.target.value;

    this.setState({
      data: updatedData
    });
  }

  render() {
    return (
      <form>
          {Object.keys(this.props.data.titles).map((l, index) => 
          <input type="text" name="titles" data-lang={l} value={this.state.data.titles[l]} onChange={this.handleChange.bind(this)} />
          )}
      </form>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      images: [{"titles": {"en": "deluxe1500x930.jpg"}
      }],
      count: 1
    };
  }

  render() {
    return (
        <div>
          {Object.keys(this.state.images).map((x,index) => 
            <div>
              {this.state.images[x].titles.en}
              <NameForm data={this.state.images[x]} />
              <button onClick={(() => {this.setState({ count: 2 })}).bind(this)}>test</button>
            </div>
          )}
        </div>
    )
  }
}

Answer 1

Because you set the state with this.props.data . the this.props.data came from the parent, therefore when it's changing so the state changes as well.

The solution is simple, just set the state with new value (copied from this.props.data ) by using the spread operator instead of using the same reference.

this.state = {data: ...this.props.data};