Data fetching inside the render method.

[Saifurrahmanemon]

I am trying to call the API on every row using the render method. Is there any way to achieve that?

[icflorescu]

Why would you want to do that? It's kind of an anti-pattern...

[Saifurrahmanemon]

Suppose I have a list of todos. Based on todo Id, I want to fetch todo details and show a particular detail in a column on every row. How can I achieve that?

[icflorescu]

Correct me if I'm wrong, but as far as I understand, you're going to unconditionally show the particular details for every row anyway.
In which case, why wouldn't you load the nested details upfront and have them in a structure like this:

[
  {
    "id": 1,
    "title": "Todo 1",
    "tasks": [
      { "id": 100, "title": "Task 1.1" },
      { "id": 101, "title": "Task 1.2" },
      { "id": 102, "title": "Task 1.3" }
    ],
    "author": { "id": 1000, "name": "John Doe" }
  },
  {
    "id": 2,
    "title": "Todo 2",
    "tasks": [
      { "id": 200, "title": "Task 2.1" },
      { "id": 201, "title": "Task 2.2" },
      { "id": 202, "title": "Task 2.3" }
    ],
    "author": { "id": 2000, "name": "Jane Doe" }
  }
]

Otherwise, even assuming it would be ok to fetch them during rendering (which is not, because render is not the place to do data fetching in React), you'd end up with n * x requests to display n records.