Ant design Collapse is not working with Map

user_12968171 0
Viewed 987

I'm using collapse using Ant-Design put inside the Collapse tag if I put Map for panel, It's not working can someone suggest me the solution. Without Map It work. But using Map it's not.

Here is the Code:

<Collapse
              defaultActiveKey={["1"]}
              accordion
              expandIcon={(props) => customExpandIcon(props)}
              ghost
            >
              {JSON.map((assesment, index) => (
                  
              <div>
              <Panel index header="This is panel header 1" key="1">
                <p>Header1</p>
              </Panel>
              </div>
                ))}
            </Collapse>
antd reactjs
1 Answers

There seems to be a few problems I would like to point out that should be corrected.

  1. It is not JSON.map but some list of objects (maybe assesments.map).
  2. I think Panel has to be a direct decendent of Collapse so it should not be in a div tag.
  3. Key property should be index so that not all panels have key 1

Here you have a example using map https://codesandbox.io/s/mystifying-microservice-tuef7?file=/index.js

Please ask any questions if this did not answer your question.

user_97428890
Related