render() {
    return (
      <>
        <NavBar
          handleLogin={this.props.handleLogin}
          handleLogout={this.props.handleLogout}
          userId={this.props.userId}
        />
        <div className="Movement-allContainer">
          <div className="Movement-Details">
            <div className="Movement-Header">{this.state.movement.title}</div>
            <div>
              <button
                className="Movement-likeButton"
                onClick={this.likeMovement}
                // kind of like a "like" button on instagram
              >
                {this.props.user
                  ? this.props.user.favlist.includes(this.state.movement._id)
                    ? "you liked this"
                    : "you haven't liked this"
                  : "you aren't logged in"}
              </button>
            </div>
            <img className="Movement-Image" src={this.state.movement.image} />
            <div className="Movement-Description">{this.state.movement.description}</div>
          </div>
          <OutsourceCard
            key={`OutsourceCard_${this.state.movement.title}`}
            id={this.props.id}
            links={this.state.movement.links}
          />
          <NewPostInput defaultText="New Comment" onSubmit={this.addComment} />
          <CommentsBlock
            comments={this.state.comments}
            addNewComment={this.addNewComment}
            userId={this.props.userId}
          />
        </div>
      </>
    );
  }