React key cant add to element - reactjs

Question

Im new to React and feeling shy to ask this question,but I dont know why that when I try to bind key to li element,Icant find it after rendering DOM.
Which looks like:
<ul><br />
<li>I dont know why</li><br />
<li>cant find the key</li><br />
</ul><br />
in console.
And I got 'undefined' with e.target.getAttribute('key') in click event.
Here my code (a simple todolist):
class Write extends React.Component {
constructor(props){
super(props);
this.handle=this.handle.bind(this);
}
handle(){
const text=document.getElementById('todoIn').value;
this.props.onWriteDown(text);
}
render(){
return (
<div>
<input type="text" id="todoIn" />
<button onClick={this.handle}>confirm</button>
</div>
);
}
}
class Todolist extends React.Component {
constructor (props) {
super(props);
this.n=0;
this.state={list:[]};
this.todolist=[];
this.handle=this.handle.bind(this);
this.handle_del=this.handle_del.bind(this);
}
handle (m) {
this.todolist.push({thing:m,vid:this.n++});
this.setState({list:this.todolist});
}
handle_del (e) {
var d = this.todolist.forEach((v,i)=>{
if(v.vid==e.target.getAttribute('key')){
return i;
}
});
this.todolist.splice(d,1);
this.setState({list:this.todolist});
}
render(){
var that = this;
var todo=[];
//here I create React Element for each todo and bind some attribute BUT ONLY CLICK EVENT is ACCESSIBLE.I JUST WONDER...
this.state.list.forEach(function(v,i,a){
let temp=<li key={v.vid.toString()} onClick={that.handle_del} >{v.thing}</li>;
todo.push(temp);
});
return(
<div>
<Write onWriteDown={this.handle} />
<ul>
{todo}
</ul>
</div>
);
}
}
ReactDOM.render(
<Todolist />,
document.getElementById('root')
);
<div id="root"></div>

Answer 1

key is used internally so React knows which components have been added, changed or removed.
Also, keys don't get passed through.
For more information check ReactJS's doc.
https://facebook.github.io/react/docs/lists-and-keys.html#keys

Answer 2

As said in Hemerson's answer, you shouldn't be attempting to access the key attribute, it isn't passed through, and is only used as an internal reference to the object.
Instead, you can write your code as so:
let id = v.vid.toString();
let temp=<li key={id} onClick={() => that.handle_del(id)}>{v.thing}</li>;
handle_del (id) {
var d = this.todolist.forEach((v,i)=>{
if(v.vid==id){
return i;
}
});
this.todolist.splice(d,1);
this.setState({list:this.todolist});
}