react-bootstrap Accordion not collapsing with map

react-bootstrap collapse not working
react accordion
react-bootstrap accordion chevron
react collapse
react-bootstrap accordion toggle not working
react-bootstrap accordion expand all
react-bootstrap accordion activekey
react-bootstrap accordion with arrows

I have an array of items I would like to create Panels out of which would eventually be inserted into the Accordion.

In one file, I have:

var items = this.state.contents.map(function(content, index) {
  return <Content {...content}, key={index}/>
};

return (
  <Accordion>
    {items}
  </Accordion>
);

In another file called Content I have:

return(
  <Panel header={this.props.header} eventKey={this.props.key}>
    {this.props.body}
  </Panel>
);

When I have the Accordion and Panel in the same file, they work. But when I generate the Panel using map after splitting them into two files, it doesn't seem to collapse.

Here is the solution

<Accordion>
  {this.item.map(item =>
     <AcPanel key={item.id} item={item} eventKey={item.id} />
  )}
</Accordion>

In AcPanel Class use {...this.props} for fetch all properties and assign values on your parent class like i used "eventKey={item.id}".

<Panel header={`Collapsible Group Item`} bsClass='class-name' {...this.props}>
content here
</Panel>

Accordeon Doesn't collapse iterating via map � Issue #2221 � react , am using react-bootstrap to create accordeon. Why my Accordeon doesn't work. It doesn't collapse, or slides down, it doesn't react on my clicks� React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. As one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation.

For anyone using Accordion.Toggle, this is how I got the accordion to collapse on map.

In the parent component of the Accordion, add an activeKey value to the state. Create a function to handle the active key change that will be passed down during your map to each child component of the accordion. Be sure to bind that function to the parent component.

this.state = {
  items = []
  activeKey: ''
}

handleActiveKeyChange = activeKey => {
  if (this.state.activeKey === activeKey) {
    //allows us to close expanded item by clicking its toggle while open
    activeKey = -1
  }
  this.setState({ activeKey })
}

Pass the active key state and function accordingly in your render method:

<Accordion activeKey={this.state.activeKey}>
  {this.state.items.map((item, index) => (
    <Item eventKey={index} handleActiveKeyChange={this.handleActiveKeyChange} />
  ))}
</Accordion

In your child (item) element's Accordion toggle, add the passed function and props:

<Card>
  <Card.Header>
    <Accordion.Toggle
      eventKey={this.props.eventKey}
      onClick={() => this.props.handleActiveKeyChange(this.props.eventKey)}
    >
      //+ icon here
    </Accordion.Toggle>
  </Card.Header>
  //card content here 
</Card

Accordion, If you want your Accordion to start in a fully-collapsed state, then simply don't pass in a defaultActiveKey prop to� Accordion. Accordions provide a way to restrict Card components to only open one at a time. Examples # Accordions use Card components to provide styling of the Accordion components. Use AccordionToggle to provide a button that switches between each AccordionCollapse component. Basic Example #

I found a solution that lets you use a component in a separate file.

I figured the problem must be to do with the Accordion not being able to pass some props down to the Panel because they go to the wrapping component instead, so I tried collecting all the props that weren't mine and passing them to the panel:

// make sure you have all your own props specified before ...props
// so that they can't mess up the panel.
const { body, ...props } = this.props

return(
  <Panel {...props}>
    {body}
  </Panel>
);

If you want to specify any props on the Panel, make sure they go after the collected props so that they take precedence over any defaults:

const { body, ...props } = this.props

return(
  <Panel {...props}
         bsStyle="info">
    {body}
  </Panel>
);

If you choose any props names the same as whatever Accordion is passing to Panel, you could clobber something and break it - if you're concerned, it should be straightforward to follow the code and see what is being passed on.

react-bootstrap Accordion not collapsing with map, react-bootstrap Accordion not collapsing with map. Juvenile、少年� 关注. 发布时间:2019-03-31 12:22. I have an array of items I would like to create Panels out of� I'm not quite sure what is going on with this as checking with the debugger it clearly changes the values of the state value collapse 1 between the true and false but it refused to open the Collapse. Any help would be greatly appreciated.

react-bootstrap seems to complain if the children of an Accordion are not Panels, and by wrapping Panel inside of my Content class I was doing just that.

To solve this problem I had to step away from React's convention. Rather than creating a class Content, I created another js file rather than a react.js file. By treating this file like a normal js file, I was able to call on a function inside of this file which maps over each 'this.state.contents' and return a Panel object.

This whole file will return an array of Panel class.

collapse - react-bootstrap � Bit, Tags: Animation, Collapse, React. Dependencies: classnames, dom-helpers, prop-types, react-transition-group. Built with React. Use collapse by react- bootstrap� react-bootstrap Accordion not collapsing with map twitter-bootstrap , accordion , panel , reactjs , react-bootstrap I have an array of items I would like to create Panels out of which would eventually be inserted into the Accordion.

Bootstrap JS Collapse Reference, The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, � The React Accordion component is shipped with several built-in themes such as material, bootstrap, fabric (Office 365), and high contrast. Users can customize any one of these built-in themes or create new themes by either simply overriding SASS variables or using our Theme Studio application.

Accordion, React/redux wrappers for auto-scrolling react-collapse components. Component wrappers for auto-scrolling collapsible elements - with smooth animations� I have an issue with my "react-bootstrap" Panel, Panel Group and Accordion collapse function. Basically, when you click the panel title, for a brief moment the panel collapsing animation is viewed, but a mere second the entire Panel.Body disappears. I have done a lot of research on this, and apparently no other person has gone through such an

React Accordion Component, The React Accordion (data-toggle) component displays multiple collapsible content, Beautiful animations when expanding and collapsing panels. The React Accordion component is shipped with several built-in themes such as material, bootstrap, fabric (Office 365), and Not sure how to create your first Accordion? Bootstrap is an amazing library and works wonders with ReactJS. Unfortunately, you can’t (or really shouldn’t) use Bootstrap.js with React because bootstrap directly manipulates the DOM; which could break React’s nice rendering flow. This becomes a big problem if you wanted to implement a Navbar using plain bootstrap. Take the following for example from Bootstrap’s documentation: You

Comments
  • yes this kind of crap doesn't work. I don't know how to solve it through single file approach
  • Thank you very much @Ethan it is the best solution since week ago i try solve this and searched through all net until i get this Thank you again
  • @ArslArsl turns out it is possible to do it using a normal component. See my answer.