Newbie question... :) I'm trying to show and hide a tip on a element after a click. It now works on the initial click to open the element but I would like to toggle the state after the initial click. And in the opened element also would like to use a element to close the content again...any help is highly appreciated!
const Tip = () => {
const [showResults, showTipContent] = React.useState(false)
const onClick = () => showTipContent(true)
return (
<span onClick={onClick}>
<svg className="cursor-pointer" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 9.5C12.6904 9.5 13.25 8.9404 13.25 8.25C13.25 7.5596 12.6904 7 12 7C11.3096 7 10.75 7.5596 10.75 8.25C10.75 8.9404 11.3096 9.5 12 9.5ZM11 11V17H13V11H11Z" fill="#111111"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.4771 2 2 6.4771 2 12C2 17.5228 6.4771 22 12 22C17.5228 22 22 17.5228 22 12C22 6.4771 17.5228 2 12 2ZM4 12C4 7.5817 7.5817 4 12 4C16.4183 4 20 7.5817 20 12C20 16.4183 16.4183 20 12 20C7.5817 20 4 16.4183 4 12Z" fill="#111111"/>
</svg>
{ showResults ? <TipContent /> : null }
</span>
)
}
const TipContent = () => (
<div className="tipContent">
{tip}
<span className="cursor-pointer">CLOSE</span>
</div>
)```
If I understand correctly, you want to enable toggle functionality so that your button shows and also hides your content. If so you'll want to change your onClick to toggle your showResults state rather than always having it hardcoded to true. You can toggle a boolean value by using ! (logical not) in front of it.
In order to enable your child component to close your content, you can pass through your toggle function as a prop to it. The function that youu pass can be the same one that you use to toggle your showResults state, as the "close" button will only appear if the Tip is open, making it set your state to showResults to false (ie: which will hide the component):
const Tip = () => {
const [showResults, showTipContent] = React.useState(false)
const toggleResults = () => showTipContent(results => !results); // toggle the current state value from hidden to visible, and visible to hidden
return (
<span onClick={toggleResults}>
<svg className="cursor-pointer" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 9.5C12.6904 9.5 13.25 8.9404 13.25 8.25C13.25 7.5596 12.6904 7 12 7C11.3096 7 10.75 7.5596 10.75 8.25C10.75 8.9404 11.3096 9.5 12 9.5ZM11 11V17H13V11H11Z" fill="#111111"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.4771 2 2 6.4771 2 12C2 17.5228 6.4771 22 12 22C17.5228 22 22 17.5228 22 12C22 6.4771 17.5228 2 12 2ZM4 12C4 7.5817 7.5817 4 12 4C16.4183 4 20 7.5817 20 12C20 16.4183 16.4183 20 12 20C7.5817 20 4 16.4183 4 12Z" fill="#111111"/>
</svg>
{ showResults ? <TipContent closeContent={toggleResults}/> : null }
</span>
)
}
const TipContent = ({closeContent}) => (
<div className="tipContent">
{tip}
<span className="cursor-pointer" onClick={closeContent}>CLOSE</span>
</div>
)