Bootstrap accordion not working properly with react

Question

Am very new to react and bootstrap. I have run into a problem where the accordion is not working properly. It has no color and when I click it slides quickly then disappears. I have looked at getting started but it has not helped. What am I missing.

Here is my code, thanks in advance

import React, { Component } from 'react';
import './App.css'
import Accordion from 'react-bootstrap/lib/Accordion'
import Panel from 'react-bootstrap/lib/Panel'
import Button from 'react-bootstrap/lib/Button'
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'
import Modal from 'react-bootstrap/lib/Modal'
import FormGroup from 'react-bootstrap/lib/FormGroup'
import ControlLabel from 'react-bootstrap/lib/ControlLabel'
import FormControl from 'react-bootstrap/lib/FormControl'

class App extends Component {

state = {
    recipes: [
    {recipeName: 'recipe1', Ingredients: ['cheese', 'cheese', 'cheese']},
    {recipeName: 'recipe2', Ingredients: ['cheese', 'cheese', 'cheese']},
    {recipeName: 'recipe3', Ingredients: ['cheese', 'cheese', 'cheese']}
    ]
}

  render() {
    const {recipes} = this.state;
    return (
      <div className="App container">
    <Accordion>
        {recipes.map((recipe, index)=>(
            <Panel header={recipe.recipeName} eventKey={index} key={index}>
                <ol>
                    {recipe.ingredients.map((item)=>(
                        <li key={item}>{item}</li>
                    ))}
                </ol>
            </Panel >
        ))}
    </Accordion>
      </div>
    );
  }
}
export default App;

Answer 1

I will answer my question. Even though I had referred to getting started On the clipboard as I pasted, I still had bootstrap 4 CDN . Yet through npm I had installed an older version of bootstrap 3. This was a conflict though some features like buttons could still work. The right stylesheet was this

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Answer 2

The Accordion code looks fine. Did you make sure to add the browser globals to the index.html. I am pretty sure the Accordion relies on their javascript file. Two things I did notice however.

1. Your state = needs to be inside a constructor after super(); and it should be this.state= .

2. You don't have to import every component from React Bootstrap individual library files like that. You could instead do

   import { Accordion, Panel, Button, ButtonToolbar, Modal, FormGroup, ControlLabel, FormControl} from 'react-bootstrap';