Why are my buttons not rendering in react?

So I'm new to react and I would like add rendering logic so that the "Update Course" and "Delete Course" buttons only display if:

• There's an authenticated user.

• And user._id matches UserId here is what I have so far:

CourseDetail

    class CourseDetail extends Component {
              constructor(props) {
                super(props);
                this.state = {
                  course: [],
                  user: [] //user state contains user data
                };

                this.handleButtonLogic = this.handleButtonLogic.bind(this);
              }

                componentDidMount() {
                  this.handleButtonLogic() {
                }


              handleButtonLogic() {
                const user = this.state; 
                const isLoggedIn = localStorage.getItem('IsLoggedIn');
                const UserId = localStorage.getItem('UserId');
                const button = document.getElementsByName('button')
            if (!isLoggedIn && user._id !== UserId) {
             button.style.display = 'none'
            }  else {
              button.style.display = ''
            }
              }

            render() {
        const { course, user } = this.state;

        return (//JSX inside
          <div>
            <div className="actions--bar">
              <div className="bounds">
                <div className="grid-100">
                  <span>
                    <NavLink to={`/courses/${course._id}/update`} className="button">Update Course</NavLink> 
                    <NavLink to={"#"} className="button" onClick={this.handleDelete} > Delete Course</NavLink>
                  </span>
    }

export default CourseDetail;

this is the error I get:

can someone help?