ReactJS Part 9 : Fetch API POST

Fetch API is using for fetching resources over the internet.

 

import React, { useState } from 'react';

export function CreateGroup2(props) {
    const [nameValue, setNameValue] = useState("");
    const [detailsValue, setDetailsValue] = useState("");

    const createGroupData = async (event) => {
        event.preventDefault();
        let postData = {
            groupName: nameValue,
            description: detailsValue
        };
        let response = await fetch('api/groups', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(postData)
        });

    }

    return (
            <div>
                <form onSubmit={createGroupData}>
                     <div className="form-group">
                          <label htmlFor="name">Name</label>
                          <input
                                type="text"
                                className="form-control"
                                id="name"
                                onChange={(e) => setNameValue(e.target.value)} />
                     </div>
                     <div className="form-group">
                           <label htmlFor="description">Description</label>
                           <input
                               type="text"
                               className="form-control"                                    id="description"
                               onChange={(e) => setDetailsValue(e.target.value)} />
                     </div>
                     <button type="submit" className="btn btn-primary"  id="create-group">Submit</button>                   </form>

                </div>
    );
}