Error: Type 'void' is not assignable to type 'ReactNode'

Question

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.

Answer 1

You need to return something from your function.

Where is renderCell function? perhaps you mean renderRow?

Answer 2

Make sure that the renderRows function returns the rows it renders rather than just rendering them and doing nothing.

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

Answer 3

In React with tsx, you need to make sure that the return are explicity, so you need to put return in the function renderRows, otherwise the return will be undefined