title: React doesn't re-render component on state change
body: <p>I have a component with a search field and a list of items, where I am using that value from search field to filter through the array of items and update the list. This is are the parts of the component responsible for that:</p>
  
  <pre><code>this.state = {
    tasks: null,
    unfilteredTasks: null,
  };
  
  componentDidMount() {
      this.gateway.loadTasks().then(result =&gt; {
          this.setState({tasks: result, unfilteredTasks: result})
      })
  }
  
  onSearchChange(event) {
      const value = event.target.value;
      const propsToCheck = ['task.text', 'type', 'status', 'topic.name'];
      this.setState(prevState =&gt; {
        const tasks = prevState.unfilteredTasks.filter(obj =&gt; checkObjectContainsValue(obj, value)(propsToCheck));
        return {tasks: tasks};
      })
    }
  
  render() {
      return &lt;TasksPresentation
        &lt;TasksList
          tasks={this.state.tasks}
          onSearchChange={(event) =&gt; this.onSearchChange(event)}&gt;
        &lt;/TasksList&gt;
      &lt;/TasksPresentation&gt;
    }
  </code></pre>
  
  <p>With this I can see in the developer tools that the state of the component is being changed and that the tasks list is being filtered, but the lists is not being re-rendered. Why is that, how can I fix this?</p>
  
  <p><strong>Update</strong></p>
  
  <p>On inspecting further down the component chain. I can see that the tas list table component that is responsible for rendering of the list is a class component that uses prop <code>rows</code> which is the <code>tasks</code> list being send down from the parent component, to build state:</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state.data = this.transformRows(props.rows)
    }
  </code></pre>