Breaking News: Grepper is joining You.com. Read the official announcement!

como usar o tw-element para criar um componente colapsavel em react?

Crowded Crossbill answered on October 12, 2023 Popularity 1/10 Helpfulness 3/10

answer como usar o tw-element para criar um componente colapsavel em react?

como usar o tw-element para criar um componente colapsavel em react?

Comment

import React, { Fragment, useEffect, useState } from "react";
import { Collapse, initTE } from 'tw-elements';

const CollapsibleComponent = () => {
  const [collapseState, setCollapseState] = useState(false);

  const getCollapse = (value) => {
    return !value ? "!visible" : "!visible hidden";
  };

  const interact = () => {
    setCollapseState(!collapseState);
    return false;
  };

  useEffect(() => {
    initTE({ Collapse });
  }, []);

  return (
    <Fragment>
      <div>
        <button data-te-collapse-init data-te-ripple-init data-te-ripple-color="light" role="button" onClick={interact}>
          Toggle Collapse
        </button>
      </div>
      <div data-te-collapse-item data-te-collapse-show className={"multi-collapse mt-4 "+getCollapse(collapseState)}>
        <p>This is the collapsible content.</p>
      </div>
    </Fragment>
  );
};

export default CollapsibleComponent;

Popularity 1/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Oct 12 2023

Crowded Crossbill

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

como usar o tw-element para criar um componente colapsavel em react?

Contents

More Related Answers

como usar o tw-element para criar um componente colapsavel em react?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.