This is a react project. I am using an external component (Scroller.jsx) which I can't modify.
<Scroller />
When I inspect the component part in browser, I see the following.
<div>
<!-- many other tags and divs -->
<button type="button" class="container custom-left" data-unique-id="show-left">
<div>...</div>
</button>
<button type="button" class="container custom-right" data-unique-id="show-right">
<div>...</div>
</button>
<!-- many other tags and divs -->
</div>
Is there a way I could target these 2 buttons using the data-unique-id property
and be able to keep a counter on it each time the button is clicked?
Those buttons already come with some click functionality. I don't want to affect that in any way.
Just looking to keep a count on clicks and I can't modify the component.
Note that I am trying to achieve this by targeting the buttons in someway and keep a count.
I can't modify the button and add onClick on it by changing things in the Scroller component.
Attempted the following but query selection is coming up undefined.
Plus this is a React project.
Trying not to have to use document.querySelector and instead go for something React specific.
Selection itself is currently coming up undefined which is an issue.
const = leftButton = document.querySelector('[data-unique-id="show-left"]');
const = rightButton = document.querySelector('[data-unique-id="show-right"]');
After being able to select, hoping to count via following which is untested. Unsure if it will work.
And again, this is a React project. Hoping to write it with something more React specific.
leftButton.addEventListener('click', function() {
setCount(count - 1);
});
rightButton.addEventListener('click', function() {
setCount(count + 1);
});
Query is essentially why my selection is not working. And how I could keep a count on when these buttons are clicked in a React fashion. Thanks.
MyComponent.jsx
import Scroller from 'external-lib/Scroller';
const MyComponent = () => {
const [count, setCount] = React.useState(0);
useEffect(() => {
const leftButton = document.querySelector('[data-unique-id="show-left"]'); // undefined
const rightButton = document.querySelector('[data-unique-id="show-right"]'); // undefined
leftButton.addEventListener('click', function() {
setCount(count - 1);
});
rightButton.addEventListener('click', function() {
setCount(count + 1);
});
}, []);
return (<Scroller/>);
};
export default MyComponent;
Class version may look something like this. May be a bit verbose/outdated but could point you in the right direction.
import Scroller from 'external-lib/Scroller';
import React from 'react'
export default class MyComponent extends React.Component{
constructor(props){
super(props)
this.state = {
count: 0,
setCount: 0
}
this.handleLeft=this.handleLeft.bind(this)
this.handleRight=this.handleRight.bind(this)
}
handleLeft(){
this.setState({count: count - 1 })
}
handleRight(){
this.setState({count: count -1})
}
render(){
const [count, setCount] = this.state
return(
<div>
<!-- many other tags and divs -->
<button type="button" onClick={this.handleLeft} class="container custom-left" data-unique-
id="show-left">
<div>...</div>
</button>
<button type="button" onClick={this.handleRight} class="container custom-right" data-
unique-id="show-right">
<div>...</div>
</button>
<Scroller/>
<!-- many other tags and divs -->
</div>
)}
}