index.js

import React from 'react';
import {render} from 'react-dom';
import PropTypes from 'prop-types';

import Story from './src/Story';
import StoriesTotal from './src/StoriesTotal';
import allActiveTasks from './src/allActiveTasks';
import content from './content';

function storiesState(count) {
    return new Array(count).fill({active: true, displayTasks: false});
}

class Container extends React.Component {
    constructor(props) {
        super(props);
        this.state = {stories: storiesState(this.props.stories.length)};
    }

    render() {
        const tasks = allActiveTasks(this.props.stories, this.state.stories);

        return (
            <div className='container'>
                <h1>Sample user stories</h1>
                {this.stories()}
                <StoriesTotal allTasks={tasks}/>

                <ul className='footer text-right list-unstyled'>
                    <li>June 2016</li>

                    <li>
                        Ivan Krechetov &lt;<a href='mailto:ikr@ikr.su'>ikr@ikr.su</a>&gt;
                    </li>
                </ul>
            </div>
        );
    }

    stories() {
        return this.props.stories.map(({narrative, tasks}, index) => {
            const onChangeActivity = () => {
                    this.toggleStoryActivity(index);
                },

                onToggleTasks = () => {
                    this.toggleStoryTasks(index);
                },

                state = this.state.stories[index];

            return <Story
                key={`k${index}`}
                narrative={narrative}
                tasks={tasks}
                active={state.active}
                displayTasks={state.displayTasks}
                onChangeActivity={onChangeActivity}
                onToggleTasks={onToggleTasks}/>;
        });
    }

    toggleStoryActivity(index) {
        const stories = this.state.stories.slice();

        stories[index] = Object.assign({}, stories[index], {active: !stories[index].active});
        this.setState({stories});
    }

    toggleStoryTasks(index) {
        const stories = this.state.stories.slice();

        stories[index] = Object.assign(
            {},
            stories[index],
            {displayTasks: !stories[index].displayTasks}
        );

        this.setState({stories});
    }
}

Container.propTypes = {stories: PropTypes.array.isRequired};

/* global global */
render(<Container stories={content}/>, global.document.getElementById('root'));