javascript - Uncaught TypeError: this.props.getAllContacts is not a function -

i trying render data onto page, got error "uncaught typeerror: this.props.getallcontacts not function" , cannot seem track down why. says error line: "this.props.getallcontacts();". have been googling hours.

export default class list extends component {   componentwillmount() {     this.props.getallcontacts();   }    showcontacts(contacts) {     return contacts.map((render, index) => {       return (         <ul key={index} classname="results-container">           <li>{render.first_name}</li>           <li>{render.last_name}</li>           <li>{render.email}</li>           <li>{render.phone_number}</li>           <li>{render.status}</li>         </ul>       );     });   }    render() {     const contacts = this.props.getallcontacts;      return (       <div classname="list">         <br/>         <h1>all contacts</h1>         {this.showcontacts(contacts)}       </div>     );   } }   export default class app extends component {   constructor() {     super();     this.state = {       contacts: [],       result: {},     };   }    getallcontacts() {     fetch('/contacts')     .then(r => r.json())     .then((results) => {       this.setstate({         contacts: results.data,       });       console.log(this.state);     })     .catch(err => err);   }    render() {     return (       <div classname="app">         <div classname="nav">           <nav />         </div>         <div classname="props">           {this.props.children}           <list             contacts={this.state.contacts}             getallcontacts={this.getallcontacts.bind(this)}           />         </div>       </div>     );   } } 

any appreciated, thank you.

it seems using this.props.getallcontacts both function (in componentwillmount) , list of contacts (in render). think should update render method in list use list of contacts passed in parent component.

  render() {     const contacts = this.props.contacts;     return (         <div classname="list">         <br/>         <h1>all contacts</h1>         {this.showcontacts(contacts)}       </div>     );   }