Установка условного поведения onClick в ReactJS

Question

(Я впервые использую React) Я работаю над приложением, которое фильтрует видео на основе нажатия кнопки, и это код ниже.

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;

Я думал о способе уменьшить избыточность в мой код, поэтому я хочу добавить функцию onclick, что-то вроде

onClick(){ 
          if(button.id === 'btnJava')
          {
           this.setState({videos: this.state.videos.filter(item => { 
           return item.category === 'java';})})
          }
          else if()
          {}
         }

Есть идеи, как JSX справляется с такой ситуацией?

Answer 1

У вас может быть одна функция для обработки всех случаев в зависимости от значения кнопки:

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

• 1000 .

Если вы собираетесь использовать

this.setState({videos: this.state.videos.filter(item => { 
                    return item.category === 'java';
               })

, ваше исходное состояние видео будет потеряно после фильтрации.

Я бы рекомендовал сохранить отфильтрованное состояние в другая переменная. Таким образом, у вас есть возможность сбросить фильтр.

Комбинируя ответ из 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>