CODEWITHSUNDEEP
javascriptnode.jsreactjs
vfield
vfield

Reputation: 21

How do I add a post route to my react application

I have a modal with the following code in my components and I would like to add a post route to my code to capture the user's response. I have Mongo/Mongoose set up as well as a backend server. Any help would be amazing as I am new to React!

render() {
		return(
			<div className="modal column y-center">
				<h3>How are you doing?</h3>
				{!this.state.start ? (
					<div className="choices">
						<button onClick={() => this.startRelaxation('ok_images')}>Ok</button>
						<button onClick={() => this.startRelaxation('neutral_images')}>Neutral</button>
						<button onClick={() => this.startRelaxation('anxious_images')}>Anxious</button>
					</div>
				) : (
					<div className="column y-center">
						<div className="image">
							<img src={this.state[this.state.mood][this.state.current_image]}/>
						</div>
						<button onClick={this.nextImage.bind(this)}>Next Image</button>
					</div>
				)}
				<button onClick={this.props.closeModal}>Close</button>
			</div>
		)
	}
}

Upvotes: 1

Views: 148

Answers (2)

Grant Herman
Grant Herman

Reputation: 973

This is just building off of Arman's post, but you can do something like this:

import axios from 'axios';
import React, {Component} from 'react';

class YouComponent extends Component {
        constructor(props){
            super(props);
            this.startRelaxation = this.startRelaxation.bind(this);
        }
        startRelaxation(string){
            axios.post('YourRoute'{'BODY OF REQUEST'})
            .then(data => 'DO STUFF WITH DATA');
        }
        render() {
            return(
                <div className="modal column y-center">
                    <h3>How are you doing?</h3>
                    {!this.state.start ? (
                        <div className="choices">
                            <button onClick={() => this.startRelaxation('ok_images')}>Ok</button>
                            <button onClick={() => this.startRelaxation('neutral_images')}>Neutral</button>
                            <button onClick={() => this.startRelaxation('anxious_images')}>Anxious</button>
                        </div>
                    ) : (
                        <div className="column y-center">
                            <div className="image">
                                <img src={this.state[this.state.mood][this.state.current_image]}/>
                            </div>
                            <button onClick={this.nextImage.bind(this)}>Next Image</button>
                        </div>
                    )}
                    <button onClick={this.props.closeModal}>Close</button>
                </div>
            )
        }
    }

You have the axios request in the startRelation method and you can do whatever you need to do in the DB.

Upvotes: 0

Arman Charan
Arman Charan

Reputation: 5797

I would recommend hooking up your startRelaxation() function to execute a HTTP request to your backend using a 3rd party library such as Axios.

Alternatively, given you are using MongoDB, you may find a database management tool such as Parse Server very useful.

Upvotes: 1

Related Questions