Как при клике показывать/скрывать блок на react?

Question

[fedorova_0410]

Нужно переписать компонент на class. Чтобы при клике на h2 скрывался/появлялся блок fielset.

const SelectTaxon = (props) => {
  let selectTaxonCheckbox = props.selectTaxonData.map((input) => (
    <InputCheckbox
    id={input.id}
    htmlFor={input.htmlFor}
    title={input.title} />
  ))


  return (
    <div className={styles.taxon}>
      <h2 className={styles.h2}>Назва Таксону</h2>
      <fieldset className={styles.fieldset + ' ' + styles.fieldsetActive}>
        <legend className={styles.legend}>Охоронний статус</legend>
        {selectTaxonCheckbox}
        <legend className={styles.legend + ' ' + styles.legendTaxon}>
          Джерело даних
        </legend>
      </fieldset>
    </div>
  )
}

export default SelectTaxon

Answer 1

[Тигран Абрамян]

import React, { useState } from 'react';

const SelectTaxon = (props) => {
  const [isShown, setIsShown] = useState(true);

  const toggleFIeldset = () => setIsShown(!isShown);

  let selectTaxonCheckbox = props.selectTaxonData.map((input) => (
    <InputCheckbox
      id={input.id}
      htmlFor={input.htmlFor}
      title={input.title} />
  ))


  return (
    <div className={styles.taxon}>
      <h2 className={styles.h2} onClick={toggleFIeldset}>Назва Таксону</h2>
      {isShown &&
        <fieldset className={styles.fieldset + ' ' + styles.fieldsetActive}>
          <legend className={styles.legend}>Охоронний статус</legend>
          {selectTaxonCheckbox}
          <legend className={styles.legend + ' ' + styles.legendTaxon}>
            Джерело даних
          </legend>
        </fieldset>
      }
    </div>
  )
}

Comments

[fedorova_0410]

Спасибо огромное!!! Огромнейшее!