Passing arguments to event handlers and getting the value in ReactJS? - reactjs

Question

I have implemented pagination component which has 5 pages in total. Pagination is child component of home component.
When I click on page 1 it should get page number through getpagenumber() and handleClick() which makes use of page number but in below code getpagenumber() does not work when we click on page number.
pagination.js:
import React, { Component } from 'react';
class Pagination extends Component {
getpagenumber(val){
return val;
}
handleClick(){
this.setState({
end:getpagenumber()*16,
start:end-16
});
const end = getpagenumber()*16;
this.props.onChange(end - 16, end);
}
render() {
return (
<div>
<Content/>
<div className="container">
<ul className="pagination">
<li {this.getpagenumber(1)} onClick={this.handleClick}>1</li>
<li {this.getpagenumber(2)} onClick={this.handleClick}>2</li>
<li {this.getpagenumber(3)} onClick={this.handleClick}>3</li>
<li {this.getpagenumber(4)} onClick={this.handleClick}>4</li>
<li {this.getpagenumber(5)} onClick={this.handleClick}>5</li>
</ul>
</div>
</div>
);
}
}
export default Pagination;
home.js :
import React, { Component } from 'react';
import Pagination from './pagination';
import Content from './content';
class Home extends Component {
constructor(props){
super(props);
this.state = {
start:0,
end:16
};
}
onChangePagination = (start, end) => {
this.setState({
start:start,
end:end
});
};
render() {
return (
<div>
<Content start={start} end={end}/>
<Pagination onChange={this.onChangePagination}/>
</div>
);
}
}
export default Home;

Answer 1

You are exaggerating a bit. All you need is this:
import React, { Component } from 'react';
class Pagination extends Component {
handleClick(value){
this.setState({
end: value*16,
start: end-16
});
const end = value*16;
this.props.onChange(end - 16, end);
}
render() {
return (
<div>
<Content/>
<div className="container">
<ul className="pagination">
<li><a href="#" onClick={this.handleClick.bind(this, 1)}>1</a></li>
<li><a href="#" onClick={this.handleClick.bind(this, 2)}>2</a></li>
<li><a href="#" onClick={this.handleClick.bind(this, 3)}>3</a></li>
<li><a href="#" onClick={this.handleClick.bind(this, 4)}>4</a></li>
<li><a href="#" onClick={this.handleClick.bind(this, 5)}>5</a></li>
</ul>
</div>
</div>
);
}
}
export default Pagination;
Notes:
Maybe consider even passing the number of pages to the Pagination component and then generating an array from 1 to that number and just mapping out the li with the clicks.
Clicks should go on the link tags.