Search code examples
javascriptreactjstypescriptantd

Ant UI Collapse with ul tag render without bullets

When i put in antd collapse children tags like this

<Collapse accordion expandIconPosition="end" items=[{
  key: '1',
  label: '123',
  children: <ul><li>1</li><li>2</li><li>3</li></ul>
}]/>

Than collapse render every li element without bullets collapse when i put 'ul li' tags

How to make antd render ul items with bullets?

I new in antd library and dont know how to fix it if it is possible

Solution

  • Here is the code on how you can render a list as the panel of the collapse component:

    Note: this is Ant Design version 5.13.2

    import React from 'react';
import './index.css';
import { Collapse } from 'antd';

const renderChildren = () => {
  return <ul>
    <li>1</li>
    <li>3</li>
    <li>3</li>
  </ul>
}

const items = [
  {
    key: '1',
    label: 'This is panel header 1',
    children: renderChildren(),
  }
];

const App = () => {

  const onChange = key => {
    console.log(key);
  };

  return <Collapse items={items} defaultActiveKey={['1']} onChange={onChange} />;
};

export default App;

    And here is the result: enter image description here

    You can find this solution on the official Ant design page too: https://ant.design/components/collapse#examples