score:-2

First, you need maybe some theoretical view:

https://pusher.com/tutorials/consume-restful-api-react

https://www.robinwieruch.de/react-hooks-fetch-data


  • You should firstly save data
  • You save them to the state
  • You display them in the part where it is rendered

To download data from api (GET)- you don't do it directly in form - you only use either ComponentDidMount or UseEffect.

  componentDidMount() {
    fetch(ApiURL)
      .then(res => res.json())
      .then(res => this.setState({ planets: res }))
      .catch(() => this.setState({ hasErrors: true }));
  }

  useEffect(async () => {
    const result = await axios(
      ApiURL,
    );
    setData(result.data);
  });

To send data to api (POST)- It's complicated - you need information about client-server communication

Straight from the React docs:

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

score:0

It will not work like php.. you need to have something like backend (node or php to pass the data) or even some site to accept the request..

score:5

That is not possible if your React app is static(not server side rendered). When you send some POST request to your react app, nginx(or other server) will not allow that kind of action(you cannot post to static files) Even if you bypass that restriction, react script will not have any data from your POST request, because nginx will process your request and return just a html with react script to you


Related Query

More Query from same tag