Why are my buttons not rendering in react?

Question

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?

Answer 1

I just moved your logic inside render itself, and have used ternary operator to conditionally render. If user is authenticated and user id matches the current user's id, it will display the buttons.

Closer look at ternary:

{(!isLoggedIn && user._id !== UserId) ? (<span>
   <NavLink to={`/courses/${course._id}/update`} className="button">Update Course</NavLink>
   <NavLink to={"#"} className="button" onClick={this.handleDelete}>
                  Delete Course</NavLink>
</span>) : null}

Edited Code: handleButtonLogic() is not needed if we do the following, I have removed it too.

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

  render() {
    const {course, user} = this.state;
    const isLoggedIn = localStorage.getItem('IsLoggedIn');
    const UserId = localStorage.getItem('UserId');
    return (
      <div className="actions--bar">
        <div className="bounds">
          <div className="grid-100">
            {(!isLoggedIn && user._id !== UserId) ? (
              <span>
                <NavLink to={`/courses/${course._id}/update`} className="button">Update Course</NavLink>
                <NavLink to={"#"} className="button" onClick={this.handleDelete}>
                  Delete Course</NavLink>
              </span>
            ) : null}
        </div>
      </div>
    </div>
  )
}

export default CourseDetail;

Answer 2

For react, need a different mind set than modifying DOM from javascript. Here i added logic to show/hide the button by adding the logic to have hide className or not. You could add the conditional logic to entire span as well.

const hide = {
  display: none  
};

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

  handleDelete = () => {
  }

  handleUpdate = () => {
  }

  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 ' + (!isLoggedin && user._id != UserId ? 'hide' : '')}
                  onClick={() => this.handleUpdate()}
                >
                    Update Course
                </NavLink> 
                <NavLink 
                  to={"#"} 
                  className={'button ' + (!isLoggedin && user._id != UserId ? 'hide' : '')}
                  onClick={() => this.handleDelete()} 
                >
                    Delete Course
                </NavLink>
              </span>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CourseDetail;