# react keys

**URL:** <https://forum.kirupa.com/t/react-keys/638349>\
**Category:** web dev\
**Created:** [June 9, 2018, 3:18pm UTC](https://forum.kirupa.com/t/react-keys/638349 "2018-06-09T15:18:50Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ollie-w](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ollie-w/32/8435_2.png) [@ollie-w](https://forum.kirupa.com/u/ollie-w)\
**Post date:** [June 9, 2018, 3:18pm UTC](https://forum.kirupa.com/t/react-keys/638349/1 "2018-06-09T15:18:50Z")

</div>

I am getting the error `Warning: Todo:`key`is not a prop. Trying to access it will result in`undefined`being returned. If you need to access the same value within the child component, you should pass it as a different prop.`

For context: [https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)

My code (I am very new to React):

```
import React, {Component} from 'react';
import Todo from './todo.js';
import shortid from 'shortid';

var todosArray = [
	{title: "thingy", description: "some stuff"},
	{title: "blah", description: "other stuff"},
	{title: "go to shop", description: "buy some milk"},
	{title: "study", description: "learn React"}
	]

	todosArray.forEach((todo) => {
	todo.key = shortid.generate()
	})

class Todos extends Component {

	delete(key) {
		todosArray.filter((item) => {
			console.log(item.key)
			return(item.key !== key)
		})
	}

	render() {

		var todos = todosArray.map((todo, index) => {
			return <Todo delete={this.delete} key={todo.key} title={todo.title} description={todo.description}/>
			})
		return(
			<ul className="grid">
				{todos}
			</ul>
		)
	}
}

export default Todos;
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 10, 2018, 6:42pm UTC](https://forum.kirupa.com/t/react-keys/638349/2 "2018-06-10T18:42:32Z")

</div>

Because key is used by React for keeping track of elements, it might be reserved as a prop name. Try renaming `key={todo.key}` to something like `itemKey={todo.key}`. Does that work? 🙂