Replace class using javascript is not working in reactjs

Question

I want to change the class of dynamic element on click function for that I tried below solutions but none of these working

  handleClick=(event,headerText)=>{
     document.getElementsByClassName('sk-reset-filters')[0].className = 'jjjj';
  }


 handleClick=(event,headerText)=>{
   var reset = document.querySelectorAll('.sk-reset-filters.is-disabled')[0];
   console.log(reset)
   if(reset){
     reset.className = 'sk-reset-filters';   
     console.log(reset)   
  }

I just want to remove the is-disabled when click. I also tried using setTimout function but doesn't work. Is there anything wrong?

When I console.log(reset) I'm getting below html.

<div class="sk-reset-filters is-disabled">
    <div class="sk-reset-filters__reset">Clear all</div>
</div>

Answer 1

You can handle disable or show dom elements with react state in this way:

state={isDisabled:true}  // set a state property

handleClick=(e)=>{
e.preventDefault
this.setState({isDisabled:false}) //change !isDisabled to false when clicked
}

render() {
  {isDisabled} = this.state
  let disabledMarkup = isDisabled ? <div>something</div> : null}
  return (<React.Fragment>{disabledMarkup}
  <button onClick={this.handleClick}></button>
  </React.Fragment>)}