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>
        
        
    
    );
          }
  }

Why is there a need to use bind? Can’t you call the method directly? — Terry
– Terry, Commented Sep 29, 2021 at 22:09
There's a few things going on. Right now, your sort function is inside the render function. Move that outside. Next, you only need to "bind this" in your constructor. Uncomment the line you've got in your constructor. Lastly, since you don't need to bind inside the render function, change your button's onClick to onClick={this.sort}. There's some more information about binding this for events such as change events and why it's necessary here: reactjs.org/docs/handling-events.html — nbokmans
– nbokmans, Commented Sep 29, 2021 at 22:09
Yeah, a bunch of issues here, the biggest probably the returning of a setState call inside your sort function. Anyway, I've fixed your code: codesandbox.io/s/brave-hertz-8lefg?file=/src/App.js — user5734311
– user5734311, Commented Sep 29, 2021 at 22:28

Nicholas Tower · Accepted Answer · 2021-09-29 22:08:53Z

3

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() {
    // ...
  }
}

answered Sep 29, 2021 at 22:08

Nicholas Tower

86.9k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related