Change the display based on state from other component-CodePudding

So I have this custom collapse where I switch between 2 styles of displaying based on this const [disabled, setDisabled] = useState(true); state. Then I use this custom collapse on another component where after I click on a button I will want to change to another style of display which is the 3rd style of display. How exactly do I get the state then change it on the original component?
Here's the custom collapse in ./CustomCollapse.js

const CustomCollapse = (props) => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={
          <span>
            <span style={{ color: "#0076de", float: "right" }}>
            // Here's where I wanna add the 3rd style
              {disabled ? <div id={styles.themeBox}><p> 10</p></div> : <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginLRight:'10px', width:'auto', objectFit:'contain'}} />}
            </span>
          </span>
        }
      >
        {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};

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

import AntCollapse from './CustomCollapse';

  let [followed, setFollowed] = useState(false);
  const setFollowed = () => {
    setFollowed(prev => !prev)
  } 
// {...other code}

<AntCollapse id={styles.telegramHeader1} header="Follow XXX on Telegram Announcement Channel">
          <Row type='flex' align='middle' justify='center'>
            <Button href={links[0]} target="_blank" style={buttonStyle1} onClick={() => setClicked(false)}>
              <Icon type="link" style={{ color: '#fff' }} theme="outlined" />
              Subscribe
            </Button>
          </Row>
          <span className={styles.greyLine}> </span>
          <Row type='flex' align='middle' justify='center'>
           //Here's where I wanna change followed to true
            <Button onClick={setFollowed} style={buttonStyle2} disabled={clicked}>Continue</Button> 
            <Button type='text' style={{color:'#EB7B59', border:'#f7f7f7', background:'#f7f7f7',height: "2em", fontSize:'16px', margin:'10px 0 0 10px'}}>Cancel</Button>
          </Row>
        </AntCollapse>

But how can I pass the state to ./CustomCollapse to know and change the style?

CodePudding user response：

You can pass the disabled value to the child component (CustomCollapse ) by adding a property.

import React, { useState, useEffect } from 'react'

const CustomCollapse = (props) => {
    const [disabled, setDisabled] = useState(true);

    useEffect(() => {
        setDisabled(props.isDisabled)
    }, [props.isDisabled])

    return (
        <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
            <AntCollapse.Panel
                header={props.header}
                key="1"
                showArrow={false}
                bordered={false}
                extra={
                    <span>
                        <span style={{ color: "#0076de", float: "right" }}>
                            // Here's where I wanna add the 3rd style
                            {disabled ? <div id={styles.themeBox}><p> 10</p></div> : <img src={arrowDownIcon} alt="" style={{ height: '1.2em', marginLRight: '10px', width: 'auto', objectFit: 'contain', float: 'left' }} />}
                        </span>
                    </span>
                }
            >
                {props.children}
            </AntCollapse.Panel>
        </StyledCollapse>
    );
};

and in the parent component

import AntCollapse from './CustomCollapse';

    //inside your parent component

    let [followed, setFollowed] = useState(false);
    const [disabledCollapse, setDisabledCollapse] = useState(true)
    // {...other code}
    const toggleDisabledCollapse = () => {
        setDisabledCollapse(prev => !prev)
    }
    return <AntCollapse isDisabled={disabledCollapse}  id={styles.telegramHeader1} header="Follow XXX on Telegram Announcement Channel">
        <Row type='flex' align='middle' justify='center'>
            <Button href={links[0]} target="_blank" style={buttonStyle1} onClick={() => setClicked(false)}>
                <Icon type="link" style={{ color: '#fff' }} theme="outlined" />
                Subscribe
            </Button>
        </Row>
        <span className={styles.greyLine}> </span>
        <Row type='flex' align='middle' justify='center'>
               //Here's where I wanna change followed to true
            <Button onClick={toggleDisabledCollapse} href={links[0]} target="_blank" style={buttonStyle2} disabled={clicked}>Continue</Button>
            <Button type='text' style={{ color: '#EB7B59', border: '#f7f7f7', background: '#f7f7f7', height: "2em", fontSize: '16px', margin: '10px 0 0 10px' }}>Cancel</Button>
        </Row>
    </AntCollapse>