How do I target and change the style of a different element when I click a button in react-CodePudding

How can I target a different react element inside the same component when I click on a button and how can this work when I reuse the component several times in my App.js?

I have created a react component that has a div and a button. By default, I made the div hidden by creating a "hidden" CSS style and giving the div the class "hidden". Now what I want to achieve is that when I click the button, it will call a function that will make the div become visible by removing the hidden class from it's classList. My react component was created with class and I am binding the "this" keyword in constructor.

Now I have gone ahead to call the re-usable component above in four places in my App.js. On the first instance of the component, when I click the button, the div becomes visible as expected, but in other instances, when I click the buttons, the other corresponding divs do not become visible as expected per component instance. So my button click only affect the first instance of my react component while the remaining do not act accordingly.

This is the function I am calling by clicking the button

handleFinish() {
        console.log("CLickedddd");
        const editBtn = document.querySelectorAll(".ResetButton");
        for (let i = 0; i < editBtn.length; i  ) {
          editBtn[i].classList.remove("hidden");
        }

This is the button and div:

<button id="finish" onClick={this.handleFinish}>
            Finish
          </button>
          <div style={{height: 300, width: 300, backgroundColor: "red"}} >
            
          </div>

CodePudding user response：

You can try this way:

export default function App() {
  const handleFinish = () => {
    const myDiv = document.getElementById("myDiv");
    myDiv.classList.remove("hidden");
  };

  return (
    <div className="App">
      <button id="finish" onClick={handleFinish}>
        Finish
      </button>
      <div
        id="myDiv"
        style={{ height: 300, width: 300, backgroundColor: "red" }}
        className="hidden"
      ></div>
    </div>
  );
}

you can assign an id or className to the targeted div, and on the onClick handle you could remove the class from the div.

Here, is the working codesandbox.

But, better than this if you want to do more like a react way, you could create a state for this div visibility and just update the state to make that div visible. Like this:

export default function App() {
  const [divVisibility, setDivVisibility] = useState(false);

  const handleFinish = () => {
    setDivVisibility(true);
  };

  return (
    <div className="App">
      <button id="finish" onClick={handleFinish}>
        Finish
      </button>
      <div
        id="myDiv"
        style={{ height: 300, width: 300, backgroundColor: "red" }}
        className={divVisibility ? "" : "hidden"}
      ></div>
    </div>
  );
}

And, here is the sandbox for it.

#PS: I have used CSS for hidden class to make it actually display none. and I hope you have used something similar CSS or you have used the framework that provide this class.

CodePudding user response：

You should use a state variable to control your div's visibility.

class App extends Component {
  constructor() {
    super();
    this.state = { hidden: false };
  }

  handleFinish = () => {
    console.log("CLickedddd");
    this.setState({ hidden: !this.state.hidden });
  };

  render() {
    return (
      <>
        <button id="finish" onClick={this.handleFinish}>
          Finish
        </button>
        <div
          style={{ height: 300, width: 300, backgroundColor: "red" }}
          className={this.state.hidden ? "hidden" : ""}
        ></div>
      </>
    );
  }
}

See this sandbox