Q:

React Child prop variable is undefined even though I defined the variable before

So I want to display a list of persons.In my parent component I map an array of person. Each person has a name, first name and age. 
To display every person with all attributes is no problem, but I have a keybind on "r" and if I later press "r" on my keyboard, I want to console log the age of one specific person. So thats why I defined a key press function in the Person component. But now if I press "r" on the keyboard, I get the following error: "TypeError: Cannot read property 'person' of undefined" at the line where I'm trying to console log the person with his/her age.
This is basically my Parent class(PersonList.js):
{ personList.map((person, index) => {       //mapping a person list (e.g. 5 persons with 
                                            //name,firstname and age for each enty

          let active= this.state.activePerson    //true if person is active, else: false
           return (
                    <Person person={person} index={index} active={active}/>
                  )

})}
and this is my child component (Person.js):
export default class Person extends Component {

constructor(props) {
    super(props);
    this.state = {
        active: false,
        person: this.props.person,
    };
}
componentWillReceiveProps(nextProps) {
    this.setState({ active: nextProps.active });
}

componentWillMount() {
    document.addEventListener("keydown", this.onKeyPressed, false);
}

componentWillUnmount() {
    document.removeEventListener("keydown", this.onKeyPressed, false);
}

onKeyPressed(e) {
    const keyCode = e.keyCode

    if (keyCode === 82) {  //if I press r on the keyboard, the name of the active person should be 
                           //displayed (I set the attribute active to true if I click on the person 
                           //card)

        console.log("the person "+ this.state.person.name+ "is" + this.state.person.age)
    }
}

render() {
    return (

           <Card className={this.state.active}>
                {this.state.person.name}
                {this.state.person.firstname}
                {this.state.person.name}
           </Card>

So every Card gets displayed correctly but if I press "r" I get the TypeError: Cannot read property 'person' of undefined. I couldn't find anything about this problem on stackoverflow. Hopefully anyone can help me out. 
Cheers :-)

A:

"This"  is not available in your "onKeyPressed" handler function 
bind the event or use arrow function 
document.addEventListener("keydown", this.onKeyPressed.bind(this), false);
or 
onKeyPressed = e => {
const keyCode = e.keyCode;

if (keyCode === 82) {
  //if I press r on the keyboard, the name of the active person should be
  //displayed (I set the attribute active to true if I click on the person
  //card)

  console.log(
    "the person " + this.state.person.name + "is" + this.state.person.age
  );
}

};

