score:0

please note that you are calling getdetails method in render. render is not a good place to add methods which modify the internal state. please check the react doc for additional details.

score:0

there are a lot of strange things there. first of all, getdetails returns a promise, but the promise is not resolved anywhere. its usage should be something like:

getdetails()
.then(data => {
  // do something with the data
}, error => {
  // manage here the error
}):

also, this.state.data.map should be this.state.data.foreach and delete the return from inside, because you don't need to return anything outside

on the other hand, there's an issue with getcountries. its name sais it's a get, but the api call sends a post.

after that's clarified, inside getdetails you're using the data retrieved in getcountries, so its call should be inside the request resolving inside getcountries or either change getcountries to a promise and do something like:

this.getcountries()
.then(data => {
  this.getdetails();
});

you don't care when the getdetails call ends, so it doesn't need to return a promise.

and, in the end, the render function should look more like this:

render() {
  return (
    <div>
      {this.state.data.map((item, key) =>
        <div key={key}>{item.id} - {item.id}</div>
      )}
    </div>
  )
}

after this it should work properly, more or less. i have to warn you, though. probably you would need to do something easier to become familiar with react's flow and how to properly work with state and js's asynchronous functions.

score:1

this is a basic example:

import react from "react";
import reactdom from "react-dom";

import "./styles.css";

function app() {
  const  myarray=[1,2,3,4,5]

  const mytable=myarray.map((item,key)=>{return(
    <table key={key}> 
      <tr><td>id</td><td>{item}</td></tr>
    </table>)
    })
  return (
    <div classname="app">
      <h1>hello codesandbox</h1>
      {mytable}
    </div>
  );
}

const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);

you can create a const in the render and use after in return so you can tryin your code to do something like that:

render() {
        const mycomponent=  this.state.data.map((item, key) => { return (
                     <div key={key}>
                          <span>{item.it}</span>
                     </div>
                    ) });
        return (
          {mycomponent}
        ) 
  }

i used and is just for example you can use what structor you want as in the first example i used table...

score:2

i think this is happening because you're calling this.getcountries() in the render function. so the function is called in every render, that causes a new request that sets a new state, which will trigger a new render an so on, creating an infinite loop. so, if you delete the function calling from the render function it should work.


Related Query

More Query from same tag