<div id="app"></div>
.l{
  display: flex;
  flex-direction: column;
}

.li{
  padding: 4px;
  border: 1px solid gray;
  margin: 2px;
  cursor: pointer;
}

button{
  font-size: 14pt;
}

.c{
  border: 1px solid blue;
  padding: 4px;
  margin: 4px;
}
/// store area start;

const initialState = {
  list: [{label: 'item 1', isFinished: false}]
};

const {state, connect} = new Raxy(initialState);

/// store area end;

class ListItemComponent extends React.Component {
  constructor(props){ super(props); }
  
  render(){
    const {label, isFinished, onClick} = this.props;
    return (
      <div className='li' onClick={onClick}>
        {label} - <span>{isFinished && 'done' || 'in progress'}</span>
      </div>
    )
  }
}

class InfoComponent extends React.Component {
  constructor(props){ super(props); }
  
  render(){
    return (
      <div className='c'>
        {this.props.value}
      </div>
    )
  }
}

class ListComponent extends React.Component {
  constructor(props){ 
    super(props); 
    this.add = this.add.bind(this);
  }
  
  defineListItem(idx){
    return connect(ListItemComponent, state => ({
      label: state.list[idx].label, 
      isFinished: state.list[idx].isFinished
    }));
  }
  
  click(idx){  
    state.list[idx].isFinished = !state.list[idx].isFinished;
  }
  
  add(){
    const {items, maxInProgress} = this.props;
    if(items.filter(i => !i.isFinished).length < maxInProgress){
      state.list = [...state.list, {label: `item ${state.list.length + 1}`, isFinished: false}];
    }
  }
  
  render(){
    const items = this.props.items;
    return (
      <div className='l'>
      {
          items.map((i, idx) => {
            const Item = this.defineListItem(idx);
            return <Item key={idx} onClick={() => this.click(idx)} />;
          })
      }
      <button onClick={this.add}>add new item</button>
      </div>
    );
  }
}

// app area start

const List = connect(ListComponent, state => ({items: state.list}));
const Counter = connect(InfoComponent, state => ({value: `tasks in progress: ${state.list.filter(i => !i.isFinished).length}, max: 3`}))

class App extends React.Component {
  constructor(props){ super(props); }
  render(){ 
    return (
      <>
        <List maxInProgress={3} />
        <Counter />
      </>
    ); 
  }
} 

ReactDOM.render(<App />, document.getElementById('app'));

// app area end
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js
  3. https://codepen.io/tetragius/pen/OeXGpJ