How can I target a specific div with onClick? - reactjs

Question

I'm building a NetFlix clone main page.
I have already the list of movies,tv series ecc.. rendered horizontal.
I'd like to click on the next arrow and slide only the relative section.
Now if I click the next arrow on the first section, the second one above scroll and I don't want that..
How can I achieve it?
I tried to google it and some tutorials but I can't find how to target elements in the same parent with onClick.
Thank you very much
class App extends React.Component {
state = { moviesNow: [], tvSeries: [], actionMovies: [], animation: [] };
containerSection = React.createRef();
handleClick = e => {
this.containerSection.current.style.transform = `translateX(-100%)`;
};
render() {
return (
<div className="container">
<h1 className="section-title">Now playing</h1>
<div className="wrapper">
<div className="nextArrow" onClick={this.handleClick}>
<img src={nextArrow} alt="" />
</div>
<div ref={this.containerSection} className="container-section">
<MovieItem movies={this.state.moviesNow} />
</div>
</div>
<h1 className="section-title">TV Series</h1>
<div className="wrapper">
<div className="nextArrow" onClick={this.handleClick}>
<img src={nextArrow} alt="" />
</div>
<div ref={this.containerSection} className="container-section">
<MovieItem movies={this.state.tvSeries} />
</div>
</div>

Answer 1

You are using only one ref for two different elements, I guess that is where you issue is coming from. So I updated handleClick to be able to receive a ref as an argument and return a function that will receive the event :
handleClick = ref => e => {
ref.current.style.transform = `translateX(-100%)`;
};
Then you can use handleClick this way:
<div className="nextArrow" onClick={this.handleClick(secondContainerSection)}>
<img src={nextArrow} alt="" />
</div>
Eventually it gives you something like this:
class App extends React.Component {
state = { moviesNow: [], tvSeries: [], actionMovies: [], animation: [] };
containerSection = React.createRef();
//a new ref
secondContainerSection = React.createRef();
handleClick = ref => e => {
ref.current.style.transform = `translateX(-100%)`;
};
render() {
return (
<div className="container">
<h1 className="section-title">Now playing</h1>
<div className="wrapper">
<div className="nextArrow" onClick={this.handleClick(containerSection)}>
<img src={nextArrow} alt="" />
</div>
<div ref={this.containerSection} className="container-section">
<MovieItem movies={this.state.moviesNow} />
</div>
</div>
<h1 className="section-title">TV Series</h1>
<div className="wrapper">
<div className="nextArrow" onClick={this.handleClick(secondContainerSection)}>
<img src={nextArrow} alt="" />
</div>
<div ref={this.secondContainerSection} className="container-section">
<MovieItem movies={this.state.tvSeries} />
</div>
</div>

Answer 2

make a seperate component for drawer and define the ref inside it
drawer Component
class Drawer extends React.Component {
containerSection =new React.createRef();
handleClick = e => {
this.containerSection.current.style.transform = `translateX(-100%)`;
};
render() {
return (
<div className="wrapper">
<div className="nextArrow" onClick={this.handleClick}>
<img src={nextArrow} alt="" />
</div>
<div ref={this.containerSection} className="container-section">
{this.props.children}
</div>
</div>
Main component
class App extends React.Component {
state = { moviesNow: [], tvSeries: [], actionMovies: [], animation: [] };
containerSection = React.createRef();
handleClick = e => {
this.containerSection.current.style.transform = `translateX(-100%)`;
};
render() {
return (
<div className="container">
<h1 className="section-title">Now playing</h1>
<Drawer><MovieItem movies={this.state.moviesNow} /></Drawer>
<h1 className="section-title">TV Series</h1>
<Drawer><MovieItem movies={this.state.tvSeries} /></Drawer>
</div>);