I'm getting an error while calling the function, this is just for practice so I have kept everything inside App.tsx. My class looks like this:

enum Actor {

  None = '',

}



const initializeCard = () => {

  //some logic here

  return card;

}



export default class App extends Component<{}, State> {

  state: State ={

    card: initializeCard()

  }



  public renderRows = () => {

    const { card } = this.state;

    board.map((actor, index) => this.renderRow(actor, index));

  }



  public renderRow = (actor: Actor, index: number) => {

    return(

      <div className="cell">



      </div>

    )

  }



  public render() {

    return (

      <div className="App">

        <div>

            { this.renderRows() } // Here I'm getting the error

        </div>

      </div>

    )

  }

}

My Package.json looks like:

"dependencies": {

    "@testing-library/jest-dom": "^4.2.4",

    "@testing-library/react": "^9.3.2",

    "@testing-library/user-event": "^7.1.2",

    "@types/jest": "^24.0.0",

    "@types/node": "^12.0.0",

    "@types/react": "^16.9.0",

    "@types/react-dom": "^16.9.0",

    "react": "^16.13.1",

    "react-dom": "^16.13.1",

    "react-scripts": "3.4.1",

    "typescript": "~3.7.2"

  }

The complete error is as following:

Type 'void' is not assignable to type 'ReactNode'.ts(2322)
index.d.ts(1348, 9): The expected type comes from property 'children'
which is declared here on type
'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'

I've searched for the solutions for this error and found this but I couldn't solve my problem with this solution. Please let me know how can I fix this. Thanks.