Удаление компонента при нажатии реагировать

Question

Поскольку я новичок в React, у меня возникла проблема, как удалить компонент при нажатии кнопки рядом с компонентом. В приведенном ниже коде я передал 'click' через реквизиты компоненту Currency, назначив его обработчику события onClick. Я надеюсь, что он должен удалить компонент при нажатии кнопки. Однако чувствую, что делаю что-то не так - ничего не произошло. Кто-нибудь может мне помочь, пожалуйста.

    import React, { Component } from "react";
    import NumberFormat from "react-number-format";
    import Currency from "./Currency";


     class Currencies extends Component {
      state = {
        inputField: 0,
        exRates: 0,
        opened: true,
      };

      [....]

      BTCChangeHandler = (event) => {
        this.setState({ inputField: event.target.value });
      };

      removeComponentHandler = () => {
        this.setState({ opened: false });
      };

      render() {
        [...]


        return (
          <div>
            <input
              type="number"
              placeholder="Enter BTC value"
              onChange={this.BTCChangeHandler}
            />
            <Currency name="USD" value={usd} click={this.removeComponentHandler} />
            <Currency name="GPB" value={gbp} click={this.removeComponentHandler} />
            <Currency name="EUR" value={eur} click={this.removeComponentHandler} />
          </div>
        );
      }
    }
    export default Currencies;

Answer 1

Используйте onClick не click

<Currency name="USD" value={usd} onClick={this.removeComponentHandler} />

Answer 2

import React, { Component } from "react";
    import NumberFormat from "react-number-format";
    import Currency from "./Currency";


     class Currencies extends Component {
      state = {
        inputField: 0,
        exRates: 0,
        opened1: true,
        opened2: true,
        opened3: true,
      };

      [....]

      BTCChangeHandler = (event) => {
        this.setState({ inputField: event.target.value });
      };

      removeComponentHandler =(name)=> () => {
        this.setState({ [name]: false });
      };

      render() {
        [...]


        return (
          <div>
            <input
              type="number"
              placeholder="Enter BTC value"
              onChange={this.BTCChangeHandler}
            />
            {this.state.opened1?
            <Currency name="USD" value={usd} click= 
            {this.removeComponentHandler("opened1")} /> :null}
            {this.state.opened2?
            <Currency name="GPB" value={gbp} click= 
            {this.removeComponentHandler("opened2")} /> :null}
            {this.state.opened3?
            <Currency name="EUR" value={eur} click= 
            {this.removeComponentHandler("opened3")} /> :null}

          </div>
        );
      }
    }
    export default Currencies;