Make a component optionally controlled or uncontrolled - reactjs

Question

So I am trying to create this Collapse component either controlled or uncontrolled, optionally, depending on how its used, but that is quickly becoming a headache.
export const Collapse = ({
ExpandIcon = StyledExpandIcon,
CollapseIcon = StyledCollapseIcon,
expanded = false,
noButton = false,
...props
}) => {
const [isExpanded, setIsExpanded] = useState(expanded);
const handleSetExpanded = () => {
setIsExpanded((prevState) => !prevState);
};
return (
<>
{!noButton && (
<StyledIconButton onClick={handleSetExpanded}>
{isExpanded ? <CollapseIcon /> : <ExpandIcon />}
</StyledIconButton>
)}
<StyledCollapse in={expanded} {...props} />
</>
);
};
So I can't figure out how to make the useState optional, if the component is controlled, then its expanded state should be set somewhere outside of it, at the same time, both expanded and noButton should become required props, should either of them be supplied, so if I have suppplied only expanded then noButton should also be required, so that I remove the "default" button, same goes for first noButton.
I am pretty sure I can come up with some weird messed up logic and make it work, but what is the general way of doing something like this?

Answer 1

Your problem is your component being able to handle both controlled & uncontrolled values, right? This might not be on point to what use-case you might want. But in this case,
Add a variable to validate if your component is controlled/uncontrolled. You can check with const isControlled = expanded == null;
add an if statement to your handleSetExpanded to only call your setIsExpanded only if isControlled is false.
For your StyledCollapse && the inside of your StyledIconButton , you can pass a state of expanded || isExpanded. In that case, if expanded is null/undefined, then we'd be basing our value off of the state of your Collapse instead of the prop. Or better yet, can be isControlled ? expanded : isExpanded
Add warnings to your component (if not on prod)
This is what the code should look like.
export const Collapse = ({
ExpandIcon = StyledExpandIcon,
CollapseIcon = StyledCollapseIcon,
expanded = false,
noButton = false,
...props
}) => {
const [isExpanded, setIsExpanded] = useState(expanded)
const isControlled = expanded == null
const handleSetExpanded = () => {
if (!isControlled) {
setIsExpanded(prevState => !prevState)
}
}
if (isControlled && !noButton && process.env.NODE_ENV === 'production') {
React.useEffect(() => {
console.warning(
`You cannot use "expanded" prop without the "noButton" prop for the Collapse`,
)
}, [isControlled, noButton])
}
return (
<>
{!noButton && (
<StyledIconButton onClick={handleSetExpanded}>
{expanded || isExpanded ? <CollapseIcon /> : <ExpandIcon />}
</StyledIconButton>
)}
<StyledCollapse in={expanded || isExpanded} {...props} />
</>
)
}
Hope the code helps you or the bullet points at least guide you to what you want your code to look like! (Might I also point you to a Kent C Dodds talk that might guide you in the future)