title: Reactive filtered list architecture in ReactJS
body: <p>Trying to learn React for the first time and very frustrated by this aspect of it. By what I have read, class based components should contain state, but rely on function-base UI components to determine appearance. So in a list component, it contains the state, and then loops over an array in its state and outputs a single function-base UI component for each element. However, this obviously is not reactive when the state array is changed, bc the filtered list has already been computed. </p>
  
  <p>I am not using Redux, I am trying to understand this at a very basic level first. I think it should be proper that the list renders out a list of UI components that determine appearance, the UI component should not have to do the looping. It should not care if there is one element or 20. The class based Container component should care about that. </p>
  
  <p>In Vue this is very easy but alas everyone uses React and I have to use it. So what is the proper basic architecture for this concept? Thanks. Below is my simple List (Container) and Element (UI) based components.</p>
  
  <p>ToDoList.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import Item from './Item'
  import ItemAdder from './ItemAdder'
  
  class ToDoList extends Component {
    state = {
      items: [
        {due: "Friday", task: "Go Shopping", priority: "Medium", complete: false, id: 1},
        {due: "Tuesday", task: "Study for exam", priority: "High", complete: false, id: 2},
      ]
    }
  
    itemList = this.state.items.filter(item =&gt; !item.complete).map(item =&gt; {
      return (
          &lt;Item data={item} key={item.id}/&gt;
      )
    })
  
    addItem = (task) =&gt; {
      task.id = this.state.items.length + 1
  
      let items = [...this.state.items, task]
      this.setState({
        items: items // sets state, but does not know how to re-render filtered itemList
      })
    }
  
    render() {
      return (
          &lt;div&gt;
            { this.itemList }
            &lt;br/&gt;&lt;br/&gt;
            &lt;ItemAdder addItem={this.addItem}/&gt;
          &lt;/div&gt;
      )
    }
  }
  
  export default ToDoList
  </code></pre>
  
  <p>Item.js</p>
  
  <pre><code>import React from 'react'
  
  const Item = ( { data } ) =&gt; {
    const { task, due, priority } = data
    return (
        &lt;div&gt;
          &lt;p&gt;{ task } : { due } :  {priority }&lt;/p&gt;
        &lt;/div&gt;
    )
  }
  
  export default Item;
  </code></pre>