Q:

I am getting the error "Cannot read property 'map' of undefined"

I am new to React, and I know I am doing something very wrong in my code. I am simply trying to display a list of items I can delete, any help would be appreciated thanks. 
import React from 'react';

class ApprovalList extends React.Component{
  constructor(){
    super();
    this.state={
      data:[
        {name:'order 1'},
        {name:'order 2'},
        {name:'order 3'} 
      ]
    }
    this.delete=this.delete.bind(this);
  }
  delete(id){
    this.setState({
      data:this.state.data.filter(el => el != id )
    });
  }
  render(){
    return(
      <Item data={this.state.data} delete={this.delete}/>
    );
  }
}

class Item extends React.Component{
  delete(id){
    this.props.delete(id);
  }
  render(){
    return(
      <div>
        {this.props.data.name.map(el=><p onClick={this.delete.bind(this,el)}>{el}</p>)}
      </div>
    );
  }
}

export default ApprovalList;

A:

The name attribute is not available on data inside the Item component. The props data is an array you have to call data.map() rather than data.value.map(). Here is the Item component render function:
class Item extends React.Component {
  delete(id) {
    this.props.delete(id);
  }

  render() {
    return (
      <div>
        {this.props.data.map(el => (
          <p key={el} onClick={() => this.delete(el)}>
            {el.name}
          </p>
        ))}
      </div>
    );
  }
}

