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.

You need to return something from your function. Where isrenderCell function? perhaps you mean renderRow? — ESI
– ESI, Commented Apr 10, 2020 at 0:32
Yes, Sorry it's RenderRow(), I've corrected it and thanks, I forgot to return. Can you please post it as an answer, I'll accept that. — user1547554
– user1547554, Commented Apr 10, 2020 at 19:19

ESI · Accepted Answer · 2020-04-11 19:24:32Z

38

You need to return something from your function.

Where is renderCell function? perhaps you mean renderRow?

answered Apr 11, 2020 at 19:24

ESI

2,0871 gold badge12 silver badges26 bronze badges

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

Comments

Robert Moore · Accepted Answer · 2020-04-11 18:08:01Z

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

Igor Silva · Accepted Answer · 2023-10-19 22:37:47Z

5

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

answered Oct 19, 2023 at 22:37

Igor Silva

511 silver badge3 bronze badges

Comments

Andre Goulart · Accepted Answer · 2024-08-08 19:12:20Z

-1

Please double check if your file extension is .ts.

It should be .tsx

answered Aug 8, 2024 at 19:12

Andre Goulart

6344 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related