How to create dynamic toast?

[dimaslanjaka]

I readed https://flowbite.com/docs/components/toast/ to build toast, now I have working toast:

import { emptyInterface } from '@root/src/types/emptyInterface';
import { Button, Toast } from 'flowbite-react';
import React from 'react';
import { HiFire } from 'react-icons/hi';

// the jsx

<div className="space-y-4">
  <Button onClick={() => this.setState({ showToast: !this.state.showToast })}>Toggle toast</Button>
  {this.state.showToast && (
    <Toast className="absolute top-5 end-5 z-50 shadow">
      <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-100 text-cyan-500 dark:bg-cyan-800 dark:text-cyan-200">
        <HiFire className="h-5 w-5" />
      </div>
      <div className="ml-3 text-sm font-normal">
        <span className="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Toast title</span>
        <div className="mb-2 text-sm font-normal">Toast description.</div>
      </div>
      <Toast.Toggle onDismiss={() => this.setState({ showToast: false })} />
    </Toast>
  )}
</div>

how to change toast title, description dynamically and put the toast on parent theme (iam using react-router-dom) and access the toast and change title, description then show it from children <Outer/> ?

[dimaslanjaka]

all done, i wrote to my blog How to create dynamic flowbite-react toast