Setting conditional onClick behaviour in ReactJS - reactjs

Question

(This is my first time using React)
I am working on app that filters videos based on the button click and this is the code below
const data = [{ address: 'https://www.youtube.com/watch?v=eIrMbAQSU34', category: 'java' },
{ address: 'https://www.youtube.com/watch?v=RRubcjpTkks', category: 'C#' }];
class User extends React.Component {
constructor(props){
super(props);
this.state={
videos : data,
};
}
render(){
return (
<div className="box">
<div className="buttons-filter">
<button onClick={()=>{
this.setState({videos: data })
}}>
All
</button>
<button id="btnJava" onClick={()=>{
this.setState({videos: data },
()=>{
this.setState({
videos: this.state.videos.filter(item => { return item.category === 'java';})
})
})
}}>
Java
</button>
<button id="btnReact" onClick={()=>{
this.setState({videos: data },
()=>{
this.setState({
videos: this.state.videos.filter(item => {return item.category==='React';})
})
})
}} >
React
</button>
</div>
<div className="content">
<div className="wrapper">
{this.state.videos.map(video => (
<ReactPlayer className="vid" url={video.address} controls={true} height="300" width="350" />
))}
</div>
</div>
<div className='bottom-btn'>
{/* <a className='btn-logout'><Link to="/Login" className='link'>Logout</Link></a> */}
</div>
</div>
);
}
};
export default User;
I was thinking of a way to reduce redundancy in my code, so I want to add an onclick function, semthing like
onClick(){
if(button.id === 'btnJava')
{
this.setState({videos: this.state.videos.filter(item => {
return item.category === 'java';})})
}
else if()
{}
}
Any idea if and how JSX handles a situation like this?

Answer 1

You can have one function to handle all cases based on the button value:
handleClick = (event) => {
const value = event.target.value;
this.setState({ videos: this.state.videos.filter(item => {
return item.category === value
})
})
}
<button value="java" onClick={this.handleClick}>Java</button>
<button value="React" onClick={this.handleClick}>React</button>

Answer 2

The idea is good to abstract the button click into its own function.
onClick passes event as a value to the function and you can get the id or value or which ever attribute from that.
If you are going to use
this.setState({videos: this.state.videos.filter(item => {
return item.category === 'java';
})
The your are going to loose your original video state after filtering.
I would recommend storing the filtered state into a different variable. This way you have the option to reset the filter.
Combining the answer from HermitCrab
this.state={
videos : data,
filtered: data
};
...
handleClick = (event) => {
const value = event.target.value;
this.setState({ filtered: this.state.videos.filter(item => {
return item.category === value
})
})
}
...
<div className="box">
<div className="buttons-filter">
<button value="java" onClick={this.handleClick}>Java</button>
<button value="React" onClick={this.handleClick}>React</button>
</div>
<div className="content">
<div className="wrapper">
{this.state.filtered.map(video => (
<ReactPlayer className="vid" url={video.address} controls={true} height="300" width="350" />
))}
</div>
</div>