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 agenerateChildId
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;