javascript - React, how to POST form data to an API endpoint? - Stack Overflow

I'm Python dev learning JavaScript and React, I have built a simple React app which consumes an API which I have created. I have figured out how to use fetch to GET from my API and use that data in the app.

However i'm stuck trying to take the form data from the ponent, 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 = {}
    };

    ponentDidMount(){
        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;

I'm Python dev learning JavaScript and React, I have built a simple React app which consumes an API which I have created. I have figured out how to use fetch to GET from my API and use that data in the app.

However i'm stuck trying to take the form data from the ponent, 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 = {}
    };

    ponentDidMount(){
        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;

• javascript
• reactjs
• post
• fetch

Share Improve this question Follow asked Mar 11, 2018 at 16:00 death and gravitydeath and gravity 62911 gold badge99 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

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)
    };