correct coding structure in React.js?
Lifecycle hooks are functions that are invoked at different stages of a component. Here constructor() and componentDidMount() works different. From my point of view, state variables are initialized inside constructor() and api calls are done in componentDidMount() hook. we are not supposed to define function definitions inside lifecycle hooks. Your above component can be converted to

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false
    };
  }

  setToActive = (e, id) =&gt; {
    const {
      setTaskID,
      arrowStyleToDone,
      closeAllTasks,
      closeAllDoing,
      disableArrowButton
    } = this.props;
    setTaskID(id);
    arrowStyleToDone();
    if (!e.target.classList.contains("active")) {
      e.currentTarget.classList.add("active");
      e.currentTarget.classList.add("border-done");
      closeAllTasks();
      closeAllDoing();
    } else {
      e.currentTarget.classList.remove("active");
      e.currentTarget.classList.remove("border-done");
      disableArrowButton();
    }
  };

  componentDidMount() {} // no need for this lifecycle since we are not making any initial function call, like fetch from api etc.

  render() {
    const { done } = this.props;
    const { isActive } = this.state;
    return (
      &lt;div className="done-container" style={this.style().taskContainer}&gt;
        &lt;span style={this.style().title}&gt;Done&lt;/span&gt;
        {done &amp;&amp;
          done.map(item =&gt; (
            &lt;div
              className={`done ${isActive ? "active" : ""}`}
              key={item.id}
              onClick={e =&gt; this.setToActive(e, item.id)}
            &gt;&lt;/div&gt;
          ))}
      &lt;/div&gt;
    );
  }
}


Basic structure of React component is

Class component

class Class_Name extends Component{
    constructor(){
      this.state = {} // state variable
      this.toggleTab = this.toggleTab.bind(this);
    }

   // other functions
   toggleTab = ()=&gt;{} // these are example functions.

   // life cycle hooks if you are using any

   render(){
    return (

    )

   }


}