Manage <head> title with react-helmet

calvinl · calvinl · commit cfa14e266cea · 2017-08-14T20:56:59.000-04:00
diff --git a/common/js/containers/Home/index.js b/common/js/containers/Home/index.js
@@ -1,10 +1,14 @@
 import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
 import css from './index.scss';
 
 export default class HomeContainer extends Component {
   render() {
     return (
       <div className={css.home}>
+        <Helmet>
+          <title>Home</title>
+        </Helmet>
         <h1>It Works!</h1>
       </div>
     );
diff --git a/common/js/containers/Todos/index.js b/common/js/containers/Todos/index.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Helmet } from 'react-helmet';
 import { addTodo, toggleTodo, removeTodo, fetchTodos } from 'actions/todos';
 import { Container, Header, Checkbox, List, Button, Form } from 'semantic-ui-react';
 import classnames from 'classnames';
@@ -56,7 +57,10 @@ class TodosContainer extends Component {
 
     return (
       <Container>
-        <Header>To-Dos</Header>
+        <Helmet>
+          <title>To-Do List</title>
+        </Helmet>
+        <Header>To-Do List</Header>
         <List divided className={css.todos}>
           {todos.map((todo, idx) => {
             const { id, text, completed } = todo;
