React - Append instead of replacing state

Question

EDIT - I'm now getting TypeError: this.state.historyIn.map is not a function from the below code.

I wonder if someone can help. I've challenged myself to create a sign in application to teach myself React.

I'm looking for a way to append the 'In' & '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.

My thoughts were to create an array or object and append to this each time the button is clicked & then display this by mapping over it, but I'm not sure how I would handle this for EACH person.

I hope this makes sense.

The full project is here if you need to check any other components - https://github.com/samakers/digi-sign-in/tree/master/client/src/components

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 => ({
      open: !prevState.open
    }));
  }


  render() {
    const historyIn = this.state.historyIn.map(timeIn => {
      return (
        <div>
          In: {timeIn}
        </div>
      )
    });
    return (
      <React.Fragment>
        <tr>
          <td>{this.props.person.StaffID}</td>
          <td>
            <span
              style={{ backgroundColor: this.state.offline }}
              className={this.state.online}
            ></span>
            {this.props.person.StaffName}
            <Button
              size="sm"
              style={{ marginLeft: "20px" }}
              onClick={() => this.showHistory()}
              variant="info"
            >
               History
            </Button>
            <Collapse in={this.state.open}>
              <div>
                {historyIn}
                <br />
                Out: {this.state.historyOut}
              </div>
            </Collapse>
          </td>
          <td>
            <Button
              disabled={this.state.disabledIn}
              onClick={() => {
                this.signIn();
                this.setState({ disabledIn: true });
                this.setStatusOnline();
              }}
              variant="success"
            >
              {this.state.signIn}
            </Button>
          </td>
          <td>
            <Button
              disabled={this.state.disabledOut}
              variant="danger"
              onClick={() => {
                this.signOut();
                this.setState({ disabledOut: true });
                this.setStatusOffline();
              }}
            >
              {this.state.signOut}
            </Button>
          </td>
        </tr>
      </React.Fragment>
    );
  }
}

export default Row;

Answer 1

Hi update historyIn using setState inSignIn()

this.setState({ historyIn: this.state.historyIn });

see code below if this what you want

https://codesandbox.io/s/silly-jepsen-xr9ql