Display a message in semantic ui only after a button is clicked

Question

In Semantic UI, a message can be visible

 <Message visible>You can always see me</Message> 

or hidden.

 <Message hidden>You can't see me</Message>

I have a button that when clicked gets an API response, that then fills a Message with text. I only want to see the Message after clicking the button, because until then it is just an empty box at the bottom of the screen. How can I implement this in my function?

import React, { useState } from 'react';
import { Button, Header, Message} from 'semantic-ui-react'

export default function Writer() {

    const [titleText, setTitleText] = useState('');

    const getResponse = () => {
        //Does Some Stuff
        }).then((response) => {
            setTitleText(response.data.choices[0].text)
        })

return (
    <div>
        <Button onClick={getResponse}></Button>

        <Message>
            <Header
                icon textAlign='center'
                content={titleText}
            />
        </Message>
        
    </div>
    )
}

I tried to set a variable

var visibility = 'hidden'

and set visibility = 'visible' inside the function, then writing <Message {visibility}? but it did not work. Any recommendations please?

Answer 1

In Semantic-UI-React the visible & hidden are boolean flags. So you need to pass in a Boolean value. & because you need it to be done based on titleText you can simply use the length property.

import React, { useState } from 'react';
import { Button, Header, Message} from 'semantic-ui-react'

export default function Writer() {

    const [titleText, setTitleText] = useState('');

    const getResponse = () => {
        //Does Some Stuff
        }).then((response) => {
            setTitleText(response.data.choices[0].text)
        })

return (
    <div>
        <Button onClick={getResponse}></Button>

        <Message visible={titleText.length > 0} hidden={titleText.length === 0}>
            <Header
                icon textAlign='center'
                content={titleText}
            />
        </Message>
        
    </div>
    )
}