title: ReactJs not updating nested component
body: <p>I know that this is one of the most common questions in react: "why is state not updating my component correctly?" And I have searched far and wide and tried many things, but cannot seem to be able to solve this.</p>
  
  <p>The most common answer to that question is that I am mutating state somewhere, but I cannot spot it.</p>
  
  <p>I am trying to create a form with tabs where it is also possible to add form fields dynamically as per this article that I found: <a href="https://goshakkk.name/array-form-inputs/" rel="nofollow noreferrer">https://goshakkk.name/array-form-inputs/</a></p>
  
  <p>Everything is working fine, except that when I remove a dynamically added form, the values of that array of forms are not updated according to the state.</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import EditorFooter from '../../editor/moduleEditor/Footer';
  import EditorHeader from '../../editor/moduleEditor/Header';
  
  
  class Tab extends Component {
  
      render() {
  
          const currentTabNumber = this.props.currentTabNumber;
          const cssClass = currentTabNumber === this.props.number ? 'active' : '';
  
          return (
              &lt;button className={`tab ${cssClass}`} onClick={(e) =&gt; this.props.switchTab(this.props.number)}&gt;{this.props.name}&lt;/button&gt;
          )
      };
  };
  
  class CourseForm extends Component {
  
      render() {
          const index = this.props.index;
  
          return (
              &lt;div className="inner-form"&gt;
                  &lt;h3&gt;Kurs {index}&lt;/h3&gt;
                  &lt;button className="removeForm" onClick={this.props.handleRemoveCourse(index)}&gt;Remove form&lt;/button&gt;
  
                  &lt;h4&gt;Kursens namn&lt;/h4&gt;
                  &lt;input type="text" name="name" defaultValue={this.props.course.name} onChange={this.props.handleInputChange(index)} /&gt;
  
                  &lt;h4&gt;Årtal&lt;/h4&gt;
                  &lt;p className="helper-text"&gt;Exempel: 2002-2003&lt;/p&gt;
                  &lt;input type="text" name="years" defaultValue={this.props.course.years} onChange={this.props.handleInputChange(index)} /&gt;
              &lt;/div&gt;
          )
      };
  };
  
  
  class Editable extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              showTab: 1,
          };
      }
  
      switchTab = (tabNr) =&gt; {
          this.setState({ showTab: tabNr });
      }
  
      render() {
  
          const courses = this.props.courses;
  
          const coursesList = courses.map((course, index) =&gt;
              &lt;CourseForm key={index} index={index} course={course} handleInputChange={this.props.handleCourseChange} handleRemoveCourse={this.props.handleRemoveCourse} /&gt;
          );
  
          return (
              &lt;div id={`${this.props.moduleItem.ModuleId}_Editor`} className="form notransition"&gt;
                  &lt;EditorHeader templateName="Simple test form" /&gt;
                  &lt;section className="form-inner"&gt;
                      &lt;div className="tabs"&gt;
                          &lt;Tab switchTab={this.switchTab} currentTabNumber={this.state.showTab} number={1} name="Information" /&gt;
                          &lt;Tab switchTab={this.switchTab} currentTabNumber={this.state.showTab} number={5} name="Kurser" /&gt;
                      &lt;/div&gt;
                      {this.state.showTab === 1 ?
                          &lt;div className="tab-block"&gt;
  
                              &lt;h4&gt;Bild&lt;/h4&gt;
                              &lt;p className="helper-text"&gt;Tänk på att cv-bilden ska vara av bra kvalitet. Låt gärna en fotograf komma och fota hela projektgruppen.&lt;/p&gt;
                              &lt;input type="file" name="image" defaultValue={this.props.image} onChange={this.props.handleInputChange} /&gt;
  
                              &lt;h4&gt;Slogan&lt;/h4&gt;
                              &lt;p className="helper-text"&gt;Om du skulle skriva en kort reklamslogan om dig själv, vad skulle det vara?&lt;/p&gt;
                              &lt;textarea name="slogan" defaultValue={this.props.slogan} onChange={this.props.handleInputChange}&gt;&lt;/textarea&gt;
  
                          &lt;/div&gt;
                          :
                          null
                      }
                      {this.state.showTab === 5 ?
                          &lt;div className="tab-block"&gt;
                              {coursesList}
                              &lt;button className="addForm" onClick={this.props.handleAddCourse}&gt;Add form&lt;/button&gt;
                          &lt;/div&gt;
                          :
                          null
                      }
                  &lt;/section&gt;
                  &lt;EditorFooter {...this.props} submitForm={this.props.saveForm} /&gt;
              &lt;/div&gt;
          );
      }
  };
  
  class Readable extends Component {
      render() {
          const props = this.props;
  
          return (
              &lt;section className="module align-top notransition"&gt;
  
              &lt;/section&gt;
          );
      }
  };
  
  class Template extends Component {
      render() {
          const props = this.props;
  
          return (
              &lt;section className="module align-top"&gt;
  
              &lt;/section&gt;
          );
      }
  };
  
  
  class SimpleTestForm extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              slogan: "",
              image: "",
              courses: [{ name: '', years: '' }],
          };
      }
  
      onAddCourseForm = (event) =&gt; {
          this.setState({
              courses: this.state.educations.concat([{ name: '', years: '' }])
          });
      }
  
      handleCourseChange = (index) =&gt; (e) =&gt; {
          const newCourses = this.state.courses.map((course, newIndex) =&gt; {
              if (index !== newIndex) return course;
  
              const target = e.target;
              const value = target.type === 'checkbox' ? target.checked : target.value;
              const name = target.name;
  
              return { ...course, [name]: value };
          });
  
          this.setState({ courses: newCourses });
      }
  
      handleRemoveCourse = (index) =&gt; (e) =&gt; {
          this.setState({
              courses: this.state.courses.filter((courses, newIndex) =&gt; index !== newIndex)
          });
          //this.setState( this.state );
      }
  
      handleAddCourse = () =&gt; {
          this.setState({
              courses: this.state.courses.concat([{ name: '', years: '' }])
          });
      }
  
      saveForm = (e) =&gt; {
          console.log(this.state);
      }
  
      handleInputChange = (e) =&gt; {
  
          const target = e.target;
          const value = target.type === 'checkbox' ? target.checked : target.value;
          const name = target.name;
  
          this.setState({
              [name]: value
          });
      }
  
      render() {
  
          const inEditMode = this.props.mode === 'edit';
          const inTemplateMode = this.props.mode === 'template';
          const inReadMode = this.props.mode === 'read';
  
          return (
              &lt;div&gt;
                  {inEditMode ?
                      &lt;Editable {...this.props}
                          handleInputChange={this.handleInputChange}
                          onChangeEditor={this.onChangeEditor}
                          saveForm={this.saveForm}
  
                          handleCourseChange={this.handleCourseChange}
                          handleAddCourse={this.handleAddCourse}
                          handleRemoveCourse={this.handleRemoveCourse}
  
                          courses={this.state.courses}
                          slogan={this.state.slogan}
                          image={this.state.image}
                      /&gt;
                      :
                      null
                  }
  
                  {inReadMode ?
                      &lt;Readable {...this.props}
                      /&gt;
                      :
                      null
                  }
  
                  {inTemplateMode ?
                      &lt;Template {...this.props}
                      /&gt;
                      :
                      null
                  }
              &lt;/div&gt;
          );
      }
  };
  
  module.exports = SimpleTestForm;
  </code></pre>
  
  <p>I know it is a little long and I have tried to boil it down.</p>
  
  <p>My trouble is that if I add three forms under the "Kruser" tab, then fill them out, and then remove the middle one, the correct form is removed (I can see that if I log state), but its data is from the form below it. Until I switch tabs and go back to the Kurser tab, then it shows the correct data.</p>