React – Post Form Data To Api

/ all-scribbly, coding, react / By

Post form data to api endpoint

You need to build your request body using the FormData API.

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to “multipart/form-data”.

const myFile = document.querySelector("input[type=file]").files[0];const data = new FormData();
data.append("myFile", myFile);
data.append("otherStuff", "stuff from a text input");
fetch(target, {
    method: "POST",
    body: data
});

https://stackoverflow.com/questions/49222008/react-how-to-post-form-data-to-an-api-endpoint

However i’m stuck trying to take the form data from the component, store it as an object called request_data which I will then pass to submit_task() on the buttons onClick.

How do you go about this?

import React, { Component } from "react";const ProfileList = ({profiles}) => (    <select>        <option value="-----">----</option>        {profiles.map(profile => <option value={profile.name}>{profile.name}</option>)}    </select>);class Submit_job extends Component {    constructor(){        super();        this.state = {            "profiles": [],        };        this.request_data = {}    };    componentDidMount(){        fetch("http://localhost:8000/api/profiles/")            .then(response => response.json())            .then(response => this.setState({ profiles: response}))    }    submit_task(data) {        fetch("http://localhost:8000/api/tasks/",            {                method: "POST",                cache: "no-cache",                headers:{                    "content_type": "application/json"                },                body: JSON.stringify(data)            })            .then(response=> response.json())    }    render() {        return (            <div>                <h2>Submit Job</h2>                <form id="submit_job">                    <label>                        Material ID:                        <input type="text" name="material_id"/>                    </label>                    <br/>                    <label>                        Transcode Profile:                        <ProfileList profiles={this.state.profiles}/>                    </label>                    <br/>                    <label>                        Start Date:                        <input type="text" name="start_date"/>                    </label>                    <br/>                    <label>                        End Date:                        <input type="text" name="end_date"/>                    </label>                    <br/>                </form>                <button onClick={this.submit_task(this.request_data)}>Submit</button>            </div>        );    }}export default Submit_job;

RESPONSE

In your form

<form id="submit_job" onSubmit={this.onSubmit}>                    <label>                        Material ID:                        <input type="text" name="material_id" onChange={this.handleChange}/>                    </label>                    <br/>                    <label>                        Transcode Profile:                        <ProfileList profiles={this.state.profiles}/>                    </label>                    <br/>                    <label>                        Start Date:                        <input type="text" name="start_date" onChange={this.handleChange}/>                    </label>                    <br/>                    <label>                        End Date:                        <input type="text" name="end_date" onChange={this.handleChange}/>                    </label>                    <br/>                    <button type="submit">Submit</button>                </form>

Now in your class

handleChnage = (e) => { this.setState({...this.state.request_data, [event.data.target]: event.data.value})}        onSubmit = () => {          console.log(this.state.request_data)   // you should be able to see your form data      }

and in your constructor

constructor(){        super();        this.state = {            "profiles": [],            material_id: null,           start_data: null,           end_data: null        };        this.handleChange = this.handleChange.bind(this)    };

Related Posts