Setting conditional onClick behaviour in 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

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>

Answer 2

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>