I have been using visual Studio Code and I been getting this error

I have been using visual Studio Code and I been getting this error
0

#1

I only added 2 things to my index.html code a link ref and switching the title I did nothing else to any other files beside this App.js. I did create-an-app, bootstrap install, npm install, and yarn start. All successful where up to the 18:30 minute mark following CodingTutorial360 my localhost display is blank with this console error. I tried for about an hour to an hour in a half checking for syntax and making sure I got all the stuff installed with git bash I am going to take a break on Codeacademy or some other coding website so I don’t burn my self out on this one error. Thank you for anyone who responds

Warning: Each child in an array or iterator should have a unique “key” prop.

Check the render method of App. See https://fb.me/react-warning-keys for more information.
in li (at App.js:31)
in App (at index.js:7)
bundle.js (31469,9)

Warning: Failed prop type: In order to properly initialize the PanelGroup in a way that is accessible to assistive technologies (such as screen readers) an id or a generateChildId prop to PanelGroup is required
in PanelGroup (created by Uncontrolled(PanelGroup))
in Uncontrolled(PanelGroup) (created by Accordion)
in Accordion (at App.js:26)
in div (at App.js:25)
in App (at index.js:7)

This is my code for App.js,

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: 'Dylan1', ingredients: ['Sexy', 'Spelling Champ', 'MEGA SMART']},
    {recipeName: 'Dylan2', ingredients: ['Sexy', 'Spelling Champ', 'MEGA SMART']},
    {recipeName: 'Dylan3', ingredients: ['Sexy', 'Spelling Champ', 'MEGA SMART']}
  ]
}

  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;

#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

I do not know much about React, but was curious what you wanting the following line to do? What does the > symbol do here?

<li>key={item}>{item}</li>

If you are just trying to display the > symbol, you should try >


#4

You need to give id to div and Accordian tag.
Something like this should work:

<div id = 'a'>
<Accordian id = 'b'>