Как я могу изменить стиль кнопки с помощью React?

Свойство отображения для конкретного элемента данных в состоянии лучше всего обновлять. Итак, я настроил функцию removePlan, чтобы взять ключ элемента. Возможно, стоит даже создать компонент для каждого элемента данных и управлять состоянием отображения там.

Проверь это -

class PlanBtn extends React.Component {
  state = {
    data: [{ time: "1", value: "plug1", display: "button-reveal" }, 
    { time: "2", value: "plug2", display: "button-reveal" }]
  };
  removePlan = (e, i) => {
    console.info(e.target);
    const dataNew = [...this.state.data];
    dataNew[i].display = "button-hidden";
    this.setState({
      data: dataNew
    });
  };

  render() {
    console.info("here");
    const list = this.state.data.map((btn, i) => (
      <button onClick = {e => this.removePlan(e, i)} className = {btn.display}>
        {btn.value}
      </button>
    ));
    return (
      <div id = "plan-contain">
        <div className = "plan">{list}</div>
      </div>
    );
  }
}

Вы можете попробовать что-то подобное.

export default class PlanBtn extends React.Component{
        state = {
            data:[{time:'1', value:'plug1', display:'button-hidden'},
               ... dummy data,],
            showStyle:flase

        }
    removePlan=(e)=>{
        console.info(e.target)
        this.setState({
            showStyle:!this.state.showStyle
        })
    }

    render(){
        const list = this.state.data.map(
            btn => (<button onClick = {this.removePlan} 
           className = {`${this.state.showStyle?'button-reveal':'button-hidden'}`}
            >{btn.value}</button>)
        )
        return (
            <div id='plan-contain'>
                <div className='plan'>
                    {list}
                </div>
            </div>
        )
    }