Search code examples
reactjsantd

Antd Modal- confirm title text style

I want to show some of the dynamic text as bold in title field of confirm function, but it's giving me [object object]. How I can resolve it, please advised.

import { Modal} from 'antd'

const { confirm } = Modal
confirm({
      title:
        'Are you sure you want to delete ' +
        <b>{name}</b> +
        ' ? This action cannot be undone.',
      icon: <ExclamationCircleOutlined />,
      async onOk() {}
          
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  }

Thanks

Solution

  • The title prop can be a ReactNode so you can do:

    const name = "John";

Modal.confirm({
    title: <span>Are you sure do yo want to delete this <strong>{name}</strong>?</span>
});