TypeError: Cannot read property 'bind' of undefined, I can not figure what this means. React js

Question

I ran into this error when trying to run my React code and see it's a common error but after looking at other people's questions I am having issues still how to fix this. I am still new to React so I'm kinda lost. What the code is supposed to do is take a JSON file and and display it as a table and the button is supposed to then sort it by last name and redisplay the table.

import data from './data.json' //Imports the JSON from local file, can be changed later to pull from api
import {Button, View} from 'react-native';

export default function App() {

    return (
       <PaientTable/>
        
      );
}





class PaientTable extends React.Component { 
        

    constructor(props) {
        super(props);
        
        this.state = { counter: 0 };
       // this.sort = this.sort.bind(this);
      }
    
    
    render(){

        

       function sort (){ 
            return this.setState( 
  
              data.sort((a, b) => {//sorts by name
                  if (a.lName < b.lName) {
                    return -1;
                  }
                  if (a.lName > b.lName) {
                    return 1;
                  }
                  return 0;
                })
            );
        }
    return (

        
        
<table>
        <caption>Paients</caption>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>
            <button type="button" onClick={() => this.sort.bind(this)}> 
              Last Name
            </button>
          </th>
            
          </tr>
        </thead>
        <tbody>
          {data.map(paient => (
            <tr>
              <td>{paient.id}</td>
              <td>{paient.fName}</td>
              <td>{paient.lName}</td>
            </tr>
          ))}
        </tbody>
      </table>
        
        
    
    );
          }
  }

Answer 1

You've defined sort to be a local variable inside of render, But all the places where you try to access it you're treating it as though its a member of the class. So instead of structuring it like this:

class PaientTable extends React.Component { 
 // ...
 render() {
    function sort () {
       // ...
    }
    // ...
 }
}

Do this:

class PaientTable extends React.Component { 
  // ...
  sort() {
    // ...
  }

  render() {
    // ...
  }
}