Do I really need Redux to manage the app state to achieve this? If not - How do I manage/implement my routes and state for `<ItemList />` and `<ItemContent >/` components? 

* Should I create `<ItemsListAndContent />` component and nest other
components in?
* Maybe this is the case for HOC?

**What's the best
 approach?**

To clarify app structure here is an image:
[![enter image description here](https://i.stack.imgur.com/kaiKf.png)](https://i.stack.imgur.com/kaiKf.png)

Current case and code:
----------------------

My app state is passed from `<App />` to `<ExpenseList />`

```
class ExpenseList extends Component {

  const details = passExpenseProps(expense){
    return (
      <div>
        <ExpenseDetails expenseProps={expense} />
      </div>

    )
  }

  render () {
    const {expenses} = this.props;
    const list = expenses.expenseList.map(expense =>
        <Segment clearing key={expense.uid} >
          <a href="" onClick={() => {this.passExpenseProps(expense)}}>
            {expense.createdAt}
          </a>
          <Button floated='right'>
            Preview / Print
          </Button>
        </Segment>
    )

    return (
        <div>

          <Grid celled='internally'>
            <Grid.Row>
              <Grid.Column width={5}>
                <div>
                  <h1>Your Expense List:</h1>
                  <Button onClick={this.props.loadSamples}>Load Sample Expenses</Button>
                  <Segment.Group raised>

                    {list}

                  </Segment.Group>
                </div>

              </Grid.Column>
              <Grid.Column width={11}>
                <Segment>

                  {details}

                </Segment>
              </Grid.Column>
            </Grid.Row>
          </Grid>

      </div>

    )
  }
}

```

this gives me an error:
[![enter image description here](https://i.stack.imgur.com/OOJOo.png)](https://i.stack.imgur.com/OOJOo.png)