2021-10-30

Close collapse panel onClick - Ant Design Collapse

So make the panel close automatically after clicking on the button using onClick function. I found this useful post but I have no idea what went wrong after adding into my code.
Here's my custom collapse code in ./CustomCollapse.js:

const CustomCollapse = (props) => {
  const [open, setOpen] = useState(true);


  useEffect(() => {
    setOpen(props.isOpened)
  }, [props.isOpened])

  const setFun1= () => setDisabled(prev => !prev);
  const setFun2= () => () => setOpen(prev => !prev);

  const combineFunc = () =>{
    setFun1();
    setFun2();
  }
  

  return (
    <StyledCollapse activeKey={open} onChange={combineFunc()}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={
          <span>
            <span style=>
              {followed ? <div id={styles.emptyBox}><p>+10</p></div> : <img src={tickIcon} alt="" style= />}
              {disabled ? <div id={styles.themeBox}><p>+10</p></div> : <img src={arrowDownIcon} alt="" style= />}
            </span>
          </span>
        }
      >
      {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};

Here's where I want to change the state which is in ./FollowTelegram.js:

const [open, setOpen] = useState(["1"]);
const handleSubmit = () => {
    setOpen([]);
  }

//{...somecode}

  <AntCollapse isDisabled={disabledCollapse} isFollowed={followed} isOpened={open} id={styles.telegramHeader1} header="Follow XXX on Telegram Announcement Channel">
          <Row type='flex' align='middle' justify='center'>
            //Here's where I change the state
            <Button onClick={() => {setFollowed(); toggleDisabledCollapse(); handleSubmit();}} style={buttonStyle2} disabled={clicked}>Continue</Button> 
          </Row>
  </AntCollapse>


from Recent Questions - Stack Overflow https://ift.tt/31g1Whh
https://ift.tt/eA8V8J

No comments:

Post a Comment