How to properly use toggleFloating

[fj-vega]

I'm not sure if I understood what toggleFloating is supposed to do, but I expected it to allow me to close the chatbot after opening it. I have set my chatbot using the useState hooks and passed the toggleFloating method to the headerComponent to use it in a button.

const App = () => {
  const [opened, setOpened] = useState(true);

  const toggleFloating = opened => {
    setOpened(opened);
  }

  return (
    <ThemeProvider theme={config.theme}>
      <ChatBot 
        floating="true"
        headerComponent={<Header toggleFloating={toggleFloating} />}
        steps={config.steps}
        opened={opened}
     />
    </ThemeProvider>
  )
};

const Header = ({ toggleFloating }) => (
  <Contenedor>
    <Imagen src="img/logo-full.svg" alt=""/>
    <button onClick={() => toggleFloating(false) }>Close</button>
  </Container>
)

When I click the button the toggleFloating methods actually runs and the state is updated, but nothing happens to the chatbot, it remains open. What am I doing wrong here?

[farisadlin]

I've stumbled upon your question. You've just wrong in one props:

floating="true"

Should be

floating={true}

it should be a boolean not a string

[lytrungkienorai]

In my case, I add props toggleFloating in <Chatbot /> component as below

<ChatBot 
        floating="true"
        headerComponent={<Header toggleFloating={toggleFloating} />}
        steps={config.steps}
        opened={opened}
       toggleFloating={toggleFloating}
 />

If you use config props, you can try like this:

 const config = {
    floating: true,
    opened: opened,
    headerComponent: <HeaderComponent toggleFloating={toggleFloating} />,
    toggleFloating: toggleFloating,
  };

<ChatBot steps={steps} {...config} />