Reactjs - toggling class indipendently with right way - reactjs

Question

I am trying to add a class and remove it it's available already. I am doing to for each element separately. but it always refers the last element. what is the correct way to do this?
is there any easy and elegant way to do this?
here is my component:
import React from "react";
import "./style.css";
export default class App extends React.Component {
divRef;
constructor(props){
super(props)
this.divRef = React.createRef();
}
toggleView = (e) => {
e.preventDefault();
if(this.divRef.current.classList.contains("active")){
this.divRef.current.classList.remove("active"); //always refer div 2!?
return;
}
this.divRef.current.classList.add("active");
}
render(){
return (
<div class="parent">
<div ref={this.divRef}>
1
<a href="#" onClick={(e) => this.toggleView(e)}>toggle</a>
</div>
<div ref={this.divRef}>2
<a href="#" onClick={(e) => this.toggleView(e)}>toggle</a>
</div>
</div>
);
}
}
Live demo

Answer 1

I would utilize state to achieve this. No need for refs.
import React from "react";
import "./style.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
view1: false,
view2: false
};
}
toggleView = (e, view) => {
e.preventDefault();
this.setState({ [view]: !this.state[view] });
};
render() {
return (
<div class="parent">
<div className={this.state.view1 ? "active" : ""}>
1
<a href="#" onClick={e => this.toggleView(e, "view1")}>
toggle
</a>
</div>
<div className={this.state.view2 ? "active" : ""}>
2
<a href="#" onClick={e => this.toggleView(e, "view2")}>
toggle
</a>
</div>
</div>
);
}
}
Live Demo
EDIT:
Here I show how this approach scales when we have lots of items
import React from "react";
import "./style.css";
const NUM_ITEMS = 20;
const items = Array.from({ length: NUM_ITEMS }).map((_, idx) => ({
title: "title" + idx,
active: false
}));
const Item = ({ active, title, onToggle }) => (
<div className={active ? "active" : ""}>
{title}
<a
href="#"
onClick={e => {
e.preventDefault();
onToggle();
}}
>
toggle
</a>
</div>
);
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items
};
}
toggleView = idx => {
const items = [...this.state.items];
items[idx] = { ...items[idx], active: !items[idx].active };
this.setState({ items });
};
render() {
return (
<div class="parent">
{this.state.items.map((item, idx) => (
<Item
key={item.title}
active={item.active}
title={item.title}
onToggle={() => this.toggleView(idx)}
/>
))}
</div>
);
}
}
Demo

Answer 2

May be you can do that by using two separate ref's ,here is the demo:https://stackblitz.com/edit/react-b1wa4f?file=src%2FApp.js

Answer 3

I got with this:
import React from "react";
import "./style.css";
export default class App extends React.Component {
divRef;
constructor(props){
super(props)
this.divRef = React.createRef();
}
toggleView = (e) => {
e.preventDefault();
const element = e.currentTarget.parentElement.classList;
if(element.contains("active")){
element.remove("active");
return;
}
element.add("active");
}
render(){
return (
<div class="parent">
<div ref={this.divRef}>
1
<a href="#" onClick={(e) => this.toggleView(e)}>toggle</a>
</div>
<div ref={this.divRef}>2
<a href="#" onClick={(e) => this.toggleView(e)}>toggle</a>
</div>
</div>
);
}
}
if any one finds, it's not a right way, let me know