ReactJS this.props.* is not a function when I pass a function to child component

Question

I write messaging app. When I call the passed functions from the child component, I get the following errors:
TypeError: this.props.createNewChat is not a function. TypeError: this.props.chooseChat is not a function.

I looked through many topics, tried what I could try and nothing worked. Will be grateful for any suggestions as I'm a beginner in coding.

Here are parts of my code: Parent component:

class DashboardComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chats: [],
      email: null,
      selectedChat: null,
      chatVisible: true
    }
    this.createNewChat = this.createNewChat.bind(this);
    this.chooseChat = this.chooseChat.bind(this);
  }
  
  render () {
    return (
      <main className='dashboard-cont'>
        <div className='dashboard'>
          
            <ChatListComponent 
              newChat={this.createNewChat}
              select={this.chooseChat}>

              history={this.props.history}
              chats={this.state.chats} 
              userEmail={this.state.email}
              selectedChatIndex={this.state.selectedChat}>
            </ChatListComponent>                         
        </div>
      </main>
    )
  }

  createNewChat = () => {
    this.setState({
      chatVisible: true,
      selectedChat: null
    });
  }

  chooseChat = async(index) => {
    await this.setState({
      selectedChat: index,
      chatVisible: true
    });
  }

Child component:

class ChatListComponent extends React.Component {
    constructor(props) {
        super(props);
        this.select = this.select.bind(this);
        this.newChat = this.newChat.bind(this);
  }
    render () {

    if(this.props.chats.length > 0) {
        return (
        <main className='listOfChats'>
            {
                this.props.chats.map((_chat, _index) => {
                    return (
                        <div key={_index}>
                            <div className='chatListItem' 
                            onClick={() => this.select(_index)} 
                            selected={this.props.selectedChatIndex === _index}>
                                
                                <div className='avatar-circle'>
                                    <h1 className='initials'>{_chat.users.filter(_user => _user = this.props.userEmail)[1].split('')[0]}</h1>
                                </div>
                                
                                <div className='text'>
                                    <p id='textLine1'>{_chat.users.filter(_user => _user = this.props.userEmail)[1]}</p>
                                    <br></br>
                                    <p>"{_chat.messages[_chat.messages.length - 1].message.slice(0, 25)}..."</p>
                                </div>
                            </div>
                        </div>
                    )
                })
            }  
            <button className='newChatButton'
                onClick={this.newChat}>
                New Chat</button>  
            </main>   
         );      
        } else {
            return (
                <button className='newChatButton'
                onClick={this.newChat}>
                New Chat</button> 
            );
        }
  }

newChat = () => {
  this.props.createNewChat();
}

select = (index) => {
   this.props.chooseChat(index);
 }
};

export default ChatListComponent;

Answer 1

You should use

this.props.newChat instead of this.props.createNewChat &

this.props.select instead of this.props.chooseChat

because You are passing them as newChat and select

  <ChatListComponent 
          newChat={this.createNewChat}
          select={this.chooseChat}>

          history={this.props.history}
          chats={this.state.chats} 
          userEmail={this.state.email}
          selectedChatIndex={this.state.selectedChat}>
        </ChatListComponent>   

In child component

        newChat = () => {
         this.props.newChat();
        }

      select = (index) => {
        this.props.select(index);
       }

Answer 2

You don't have such a property in your component

        <ChatListComponent 
          newChat={this.createNewChat}
          select={this.chooseChat}>

          history={this.props.history}
          chats={this.state.chats} 
          userEmail={this.state.email}
          selectedChatIndex={this.state.selectedChat}>

Your property is newChat and not createNewChat You need to change the button's onClick to call the properties' method

        <button className='newChatButton'
            onClick={this.props.newChat}>
            New Chat</button>  
        </main>   

and

onClick={() => this.props.select(_index)} 

Answer 3

You are passing them as newChat and select

<ChatListComponent 
          newChat={this.createNewChat}
          select={this.chooseChat}>

so these are the names of the properties in the ChatListComponent

You should access them as this.props.newChat and this.props.select

newChat = () => {
  this.props.newChat();
}

select = (index) => {
  this.props.select(index);
}