Change the display based on state from other component - reactjs

Question

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?

Answer 1

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>