New to React :: Warning: Each child in a list should have a unique "key" prop

Very new to React and I keep getting the warning above. Have tried various methods to fix it, but had no luck, code is where I'm up to now. Probably something very simple, but I just cannot see it. I'm not running React through NodeJs and it's working apart from this warning.

BuildList.js file

    const ListItem = props => {
return (
<li key={`${props.title}${props.index}`} className="my-list" onClick={props.onDelete}>
{props.title}
</li>
)
}

class BuildList extends React.Component {
constructor(props) {
super(props);
this.state = {items: props.data};
}
addItemHandler() {
this.setState(prevState => {
var newItem = prompt("Enter some text");
if(newItem) {
return {items: prevState.items.concat(newItem)};
}
});
}
deleteItemHandler(txt) {
this.setState(prevState => {
if(confirm('Are you sure?')) {
return {items: prevState.items.filter(item => {
return item !== txt;
}
)};
}
});
}
render() {
return (
<div>
<p style={{'fontWeight': '700'}}>{this.props.intro}</p>
<ul className="list-unstyled">
{this.state.items.map((item, index) => {
return (
<ListItem key={item} title={item} onDelete={this.deleteItemHandler.bind(this, item)} />
)
})}
</ul>
<button onClick={this.addItemHandler.bind(this)} className="btn btn-sm btn-success">Add</button>
</div>
)
}
}

app.js file

(function(){
//Defaults
const domContainer = document.querySelector('#root');
//Final output
ReactDOM.render(
[
<BuildList data = {['Item 1','Item 2', 'Item 3', 'Item 4']} intro="My first React list" />,             
], domContainer);
}) ()

Below is the full warning message:

react-dom.development.js:524 Warning: Each child in a list should have a unique "key" prop. See LINK TO WEBSITE for more information.
warningWithoutStack	@	react-dom.development.js:524
warning	@	react-dom.development.js:1012
warnForMissingKey	@	react-dom.development.js:14793
warnOnInvalidKey	@	react-dom.development.js:15259
reconcileChildrenArray	@	react-dom.development.js:15310
reconcileChildFibers	@	react-dom.development.js:15744
reconcileChildren	@	react-dom.development.js:18242
updateHostRoot	@	react-dom.development.js:18713
beginWork$1	@	react-dom.development.js:20336
beginWork$$1	@	react-dom.development.js:25902
performUnitOfWork	@	react-dom.development.js:24841
workLoopSync	@	react-dom.development.js:24817
performSyncWorkOnRoot	@	react-dom.development.js:24416
scheduleUpdateOnFiber	@	react-dom.development.js:23844
updateContainer	@	react-dom.development.js:27249
(anonymous)	@	react-dom.development.js:27674
unbatchedUpdates	@	react-dom.development.js:24579
legacyRenderSubtreeIntoContainer	@	react-dom.development.js:27673
render	@	react-dom.development.js:27754
(anonymous)	@	apps-dist.js:1
(anonymous)	@	apps-dist.js:1

You need to add key property to your ListItemcomponent so the warning will disappear. But you can't pass it through props because it's a React reserved prop.

const ListItem = props => {
return (
<li key={`${props.title}${props.index}`} className="my-list" onClick={props.onDelete}>
{props.title}
</li>
)
}
<ul className="list-unstyled">
{this.state.items.map((item, index) => {
return (
<ListItem key={index} title={item} onDelete={this.deleteItemHandler.bind(this, item)} index={index} />
)
})}
</ul>

You should try to concatenate unique information to create your key prop. Using only the index of the map function is not a good practice.

Try this

render() {
return (
<div>
<p style={{'fontWeight': '700'}}>{this.props.intro}</p>
<ul className="list-unstyled">
{this.state.items.map((item, index) => {
return (
<ListItem key={index} title={item} onDelete={this.deleteItemHandler.bind(this, item)} />
)
})}
</ul>
<button onClick={this.addItemHandler.bind(this)} className="btn btn-sm btn-success">Add</button>
</div>
)
}

It could be caused by this

//Final output
ReactDOM.render(
[
<BuildList data = {['Item 1','Item 2', 'Item 3', 'Item 4']} intro="My first React list" />,             
], domContainer);
}) ()

Add key prop on BuildList

//Final output
ReactDOM.render(
[
<BuildList key={1} data = {['Item 1','Item 2', 'Item 3', 'Item 4']} intro="My first React list" />,             
], domContainer);
}) ()

or don't make it an array

//Final output
ReactDOM.render(
<BuildList data = {['Item 1','Item 2', 'Item 3', 'Item 4']} intro="My first React list" />,             
, domContainer);
}) ()

Codesandbox Link

I have reproduced a minimal example using your code. After adding key={index}, i do not see any warnings. However if you remove "key" attribute, you will see warnings.