Error saying rowRenderer is not a function

Question

I'm trying to implement react-virtualized , so I went into official doc here , and completed it in my code, here is my code:

import React from "react";
import { List } from "react-virtualized";

class Users extends React.Component {
  state = {
    userList: ["1", "222", "33"]
  };

  rowRenderer({ key, index, isScrolling, isVisible, style }) {
    return (
      <div key={key} style={style}>
        {
console.log(this.state.userList[index])
//this.state.userList[index]
}
      </div>
    );
  }

  render() {
    return (
      <div>
        <List
          width={300}
          height={300}
          rowCount={this.state.userList.length}
          rowHeight={20}
          rowRenderer={Users.rowRenderer}
        />
      </div>
    );
  }
}
export default Users;

Now the thing is in rowRender function, it console.log perfectly. But when I replace that with the commented line, it gives me error saying rowRenderer is not a function and when I add function before that, it gets parsing error.

How this can be resolved?

codesandbox.io

In codesandbox it is giving one more error: A cross-origin error was thrown.

Answer 1

Users is your class definition, but the rowRenderer function is a method on your class instance. You should use this.rowRenderer instead.

import React from "react";
import { List } from "react-virtualized";

class Users extends React.Component {
  state = {
    userList: ["1", "222", "33"]
  };

  rowRenderer = ({ key, index, isScrolling, isVisible, style }) => {
    return (
      <div key={key} style={style}>
        {this.state.userList[index]}
      </div>
    );
  }

  render() {
    return (
      <div>
        <List
          width={300}
          height={300}
          rowCount={this.state.userList.length}
          rowHeight={20}
          rowRenderer={this.rowRenderer}
        />
      </div>
    );
  }
}
export default Users;

Answer 2

You can try writing rowRenderer function after render. With full code only i can test. Something like this:

    import React from 'react';
    import * as StaticData from '../StaticData'
    import {List} from 'react-virtualized';

    class Users extends React.Component{

        state={
    userList:['1','222','33']
        };

        componentDidMount() {
            StaticData.getData("/users").then(data => {
                this.setState({userList:data});
                console.log(this.state.userList)
            });
        }

        render() {


                function rowRenderer({
                    key,
                    index,
                    isScrolling,
                    isVisible,
                    style,
                }) {
                    return (
                    <div key={key} style={style}>
                    {
                    console.log(key)
                    //this.state.userList[index]
                    }
                    </div>
                    );
                    }
            return(
                <div>

                    <List
                        width={300}
                        height={300}
                        rowCount={this.state.userList.length}
                        rowHeight={20}
                        rowRenderer={Users.rowRenderer}
                    />
                </div>
            );
        }
    }
export default Users;