Breaking News: Grepper is joining You.com. Read the official announcement!

REACT JS Rest API Fetch Post

Sensei answered on February 24, 2022 Popularity 10/10 Helpfulness 4/10

answer REACT JS Rest API Fetch Post

REACT JS Rest API Fetch Post

Comment

import React, { useRef, useState } from "react";
function App() {
  const baseURL = "http://localhost:8080/api";
  const post_title = useRef(null);
  const post_description = useRef(null);
  const [postResult, setPostResult] = useState(null);

  const fortmatResponse = (res) => {
    return JSON.stringify(res, null, 2);
  }
  
  async function postData() {
    const postData = {
      title: post_title.current.value,
      description: post_description.current.value,
    };

    try {
      const res = await fetch(`${baseURL}/tutorials`, {
        method: "post",
        headers: {
          "Content-Type": "application/json",
          "x-access-token": "token-value",
        },
        body: JSON.stringify(postData),
      });

      if (!res.ok) {
        const message = `An error has occured: ${res.status} - ${res.statusText}`;
        throw new Error(message);
      }

      const data = await res.json();

      const result = {
        status: res.status + "-" + res.statusText,
        headers: {
          "Content-Type": res.headers.get("Content-Type"),
          "Content-Length": res.headers.get("Content-Length"),
        },
        data: data,
      };

      setPostResult(fortmatResponse(result));
    } catch (err) {
      setPostResult(err.message);
    }
  }
  
  const clearPostOutput = () => {
    setPostResult(null);
  }
  
  return (
    <div className="card">
      <div className="card-header">React Fetch POST - BezKoder.com</div>
      <div className="card-body">
        <div className="form-group">
          <input type="text" className="form-control" ref={post_title} placeholder="Title" />
        </div>
        <div className="form-group">
          <input type="text" className="form-control" ref={post_description} placeholder="Description" />
        </div>
        <button className="btn btn-sm btn-primary" onClick={postData}>Post Data</button>
        <button className="btn btn-sm btn-warning ml-2" onClick={clearPostOutput}>Clear</button>

        { postResult && <div className="alert alert-secondary mt-2" role="alert"><pre>{postResult}</pre></div> }
      </div>
    </div>
  );
}

export default App;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.bezkoder.com

Tags: api fetch javascript post rest

Link to this answer
Share Copy Link

Contributed on Oct 03 2022

Sensei

0 Answers Avg Quality 2/10

Closely Related Answers

react fetch post

Comment

componentDidMount() {
    // Simple POST request with a JSON body using fetch
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React POST Request Example' })
    };
    fetch('https://reqres.in/api/posts', requestOptions)
        .then(response => response.json())
        .then(data => this.setState({ postId: data.id }));
}

Popularity 10/10 Helpfulness 10/10 Language javascript

Source: jasonwatmore.com

Tags: fetch fetc

Link to this answer
Share Copy Link

Contributed on Feb 24 2022

Pleasant Panda

0 Answers Avg Quality 2/10

REACT JS Rest API Fetch Post

Contents

More Related Answers

REACT JS Rest API Fetch Post

Closely Related Answers

react fetch post

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.