title: React - Append instead of replacing state
body: <p>EDIT - I'm now getting TypeError: this.state.historyIn.map is not a function from the below code. </p>
  
  <p>I wonder if someone can help. I've challenged myself to create a sign in application to teach myself React.</p>
  
  <p>I'm looking for a way to append the 'In' &amp; 'Out' History each time the Sign-In or Out events are triggered. I've got as far as replacing the state each time the button is clicked but I'm a bit stuck now. </p>
  
  <p>My thoughts were to create an array or object and append to this each time the button is clicked &amp; then display this by mapping over it, but I'm not sure how I would handle this for EACH person.</p>
  
  <p>I hope this makes sense. </p>
  
  <p>The full project is here if you need to check any other components - <a href="https://github.com/samakers/digi-sign-in/tree/master/client/src/components" rel="nofollow noreferrer">https://github.com/samakers/digi-sign-in/tree/master/client/src/components</a></p>
  
  <pre><code>import React, { Component } from "react";
  import { Button, Collapse } from "react-bootstrap";
  import "bootstrap/dist/css/bootstrap.min.css";
  import "../style/row.css";
  
  class Row extends Component {
    constructor() {
      super();
      this.state = {
        signIn: "Sign-in",
        signOut: "Sign-out",
        disabledIn: false,
        disabledOut: true,
        online: "",
        offline: "",
        open: false,
        historyIn: [],
        historyOut: []
      };
    }
  
    signIn() {
      let today = new Date();
      let time =
        today.getHours() + ":" + today.getMinutes();
      this.setState({ signIn: time, historyIn: time  });
      this.state.historyIn.push(time);
      return time;
    }
  
    signOut() {
      let today = new Date();
      let time =
        today.getHours() + ":" + today.getMinutes();
      this.setState({ signOut: time, historyOut: time});
      return time;
    }
  
    setStatusOnline() {
      this.setState({
        online: "animated",
        offline: "green",
        disabledOut: false,
        signOut: "Sign-Out"
      });
    }
  
    setStatusOffline() {
      this.setState({
        offline: "red",
        disabledIn: false,
        signIn: "Sign-In"
      });
    }
  
    showHistory() {
      this.setState(prevState =&gt; ({
        open: !prevState.open
      }));
    }
  
  
    render() {
      const historyIn = this.state.historyIn.map(timeIn =&gt; {
        return (
          &lt;div&gt;
            In: {timeIn}
          &lt;/div&gt;
        )
      });
      return (
        &lt;React.Fragment&gt;
          &lt;tr&gt;
            &lt;td&gt;{this.props.person.StaffID}&lt;/td&gt;
            &lt;td&gt;
              &lt;span
                style={{ backgroundColor: this.state.offline }}
                className={this.state.online}
              &gt;&lt;/span&gt;
              {this.props.person.StaffName}
              &lt;Button
                size="sm"
                style={{ marginLeft: "20px" }}
                onClick={() =&gt; this.showHistory()}
                variant="info"
              &gt;
                 History
              &lt;/Button&gt;
              &lt;Collapse in={this.state.open}&gt;
                &lt;div&gt;
                  {historyIn}
                  &lt;br /&gt;
                  Out: {this.state.historyOut}
                &lt;/div&gt;
              &lt;/Collapse&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;Button
                disabled={this.state.disabledIn}
                onClick={() =&gt; {
                  this.signIn();
                  this.setState({ disabledIn: true });
                  this.setStatusOnline();
                }}
                variant="success"
              &gt;
                {this.state.signIn}
              &lt;/Button&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;Button
                disabled={this.state.disabledOut}
                variant="danger"
                onClick={() =&gt; {
                  this.signOut();
                  this.setState({ disabledOut: true });
                  this.setStatusOffline();
                }}
              &gt;
                {this.state.signOut}
              &lt;/Button&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default Row;
  </code></pre>