1

I want to add a collapse effect to my list when I click my edit button so a body appears below my list element for input fields to edit the object. I am using react-bootstrap for the Collapse and ant-d for list.

Here is my List:

<List
  dataSource={this.state.data}
  renderItem={item => (
    <List.Item key={item.id} actions = {
       [
        <Button type="primary"  onClick={() => this.setState({ open: !open })}
           aria-controls="example-fade-text"
           aria-expanded={open} >
             Edit
            </Button>,
            <Button type="primary">
              Add to cart
          </Button>
        ]
      }>
          <List.Item.Meta
           avatar={<Avatar src={icon} size={64} />}
           title={item.name}
           description={item.description}
       />
      <div>Content</div>
      <Collapse in={this.state.open}>
         <div id="example-collapse-text">
            here's some text
         </div>
      </Collapse>
    </List.Item>
  )}
>

This is the error I receive:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Context.Consumer (I did not make this file, most likely auto generated by react).

  29 |   axios.get(DataUrl).then(
  30 |     res => {
  31 |       const apiData = res.data;
> 32 |       this.setState({data: apiData})
     | ^  33 |     }
  34 |   )
  35 | }

These are the contents of my state:

  state = {
    data: [],
    loading: false,
    hasMore: true,
    open: false,
  }

and I have const { open } = this.state.open inside my render function. Related notes: I have the entire thing wrapped around InfiniteScroll ,but that shouldn't affect it, (I think).

My fetchData axios call works perfectly fine when I do not have Collapse used so I don't know why it's causing this issue.

Tesuji
  • 1,335
  • 2
  • 12
  • 26
  • there could be an error when you are either exporting or importing this component, please check the export and require() https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string – nivendha Apr 24 '19 at 06:40
  • I'm fairly certain my export/import is correct as it works completely normally when I exclude the lines
    here's some text
    – Tesuji Apr 24 '19 at 14:59
  • Have you used react-bootstrap else where in your project ? .. How are you importing collapse in this component ?.....Looks like they don't have collapse component directly and they are using under accordion.. Check there components https://5c507d49471426000887a6a7--react-bootstrap.netlify.com/components/alerts/ – Hemanthvrm Apr 24 '19 at 17:00

1 Answers1

0

How are you importing collapse from react-bootstrap in your component? Probably this may sort out your issue.

If you would like to use Collapse from ant design. Then i made a sample code with your requirements.

https://codesandbox.io/s/mo4w7q85n8

Hemanthvrm
  • 2,319
  • 1
  • 17
  • 26
  • Ok it turns out I imported it wrong I did import {Collapse} instead of import Collapse. However, when it runs, the edit button does nothing and the Collapse text appears right next to
    Content
    . Did I place my Collapse element in the right place? Also I checked out your codesandbox link. Which part of the code do you use Collapse from antd? Or am I supposed to add it. Thank you     – Tesuji Apr 24 '19 at 22:15