React.js 6

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <li key={todo.id}>{todo.title}</li>
                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
        }

            render(){
             return (
                <div>
                    <h1>My Todo</h1>
                    <TodoList todos={this.state.todos} />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

constで定義したstateを渡してますね。

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    {props.todo.title}
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                    />

                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
        }

            render(){
             return (
                <div>
                    <h1>My Todo</h1>
                    <TodoList todos={this.state.todos} />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                    />
                    {props.todo.title}
                    </label>
                </li>
            );
    }