unsure why res.send not sending my object to the front end

Question

So I have tried everything and I can't figure out why the tumblr object is not passing through res.send to my frontend. Can anyone help?I tried res.json as well but that doesn't do anything. I got a promise error, an exception was caught but I'm unsure why. I assume it's related to the image object not passing through.

 import React from 'react'; import axios from 'axios'; class SearchBar extends React.Component { constructor(props) { super(props); this.state = {tag: "", images: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event){ this.setState({tag: event.target.value}); } handleSubmit(event) { event.preventDefault(); const sendTag = () => ( new Promise((resolve, reject) => { axios.post('/tag', { tag: this.state.tag, }) if(this.state.tag){ resolve(console.log('in sendtag')) } else { reject (error) } })) .then(() => { axios.post('/images') .then(res => { console.log("AXIOS:", res) this.setState({images: res}) }) }) .then((res) => { console.log('IMAGES:', this.state); }) .catch((error) => { console.log(error); }); sendTag() } render (){ return ( <div> <form onSubmit={this.handleSubmit}> <input type="text" onChange={this.handleChange} className="searchTerm" placeholder="Enter a tag" /> <input type="submit" value="Submit" /> </form> <div className="grid-container"> </div> </div> ) } } export default SearchBar; 

Server.js

 //Express const express = require('express'); const app = express(); const path = require('path'); const bodyParser = require('body-parser'); const port = process.env.PORT || 5000; //TUMBLR I const tumblr = require('tumblr.js'); //TOKENS const secret = require('./secret/config.js'); //MIDDLEWARE app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.use(express.static(path.join(__dirname, '../frontend/public'))); //INITIATE API const client = tumblr.createClient({ consumer_key: secret.consumer_key, consumer_secret: secret.consumer_secret, token: secret.token, token_secret: secret.token_secret }); // API new Promise(function(resolve, reject){ app.post('/tag', (req, res) =>{ const tag = req.body.tag if(tag){ resolve(tag) } else { reject (error) } }) }).then(function(tag){ return new Promise(function(resolve, reject){ console.log('TAG', tag) console.log('tumble api') client.taggedPosts(tag, (error, data) => { if(data){ console.log('data recieved') resolve(data) } else { reject (error) console.log('tumble api error') } }) }); }).then(function(result){ return new Promise(function(resolve, reject){ console.log('image to new variable') const images = result if (images){ resolve (images) } else { reject (error) } }) }).then(function(images){ console.log('send api') console.log('IMAGES', images) app.post('/images', (req, res) => { res.json(images) }) }) // FRONTEND ROUTE app.get('/', (req, res) => { res.sendFile(path.join(__dirname, '../frontend/index.html')); }); //SERVER app.listen(port, () => console.log('Server running on localhost 5000!')); module.exports = app; 

Answer 1

I believe the main problem is that your res.json(images) call is inside of an app.post declaration, so that would only get triggered if the client made a post request on /images . If you remove the app.post and just call res.json in your last .then of the chain it may work. However, I am not sure if your /tag route is getting set properly. I don't see any reason for the promise chain or the separate /tag and /image route, because the only asyncrhonous call you make is to client.taggedPosts . Therefore, I would recommend you define your /tag route and then put all the logic inside that route like so:

// API
app.post('/tag', function (req, res) {
    const tag = req.body.tag;
    if (!tag) {
        return res.send('please provide a tag');
    };
    console.log('TAG', tag)
    console.log('tumble api')
    client.taggedPosts(tag, function(error, data) {
        if(!data) {
            console.log('tumble api error');
            return res.send(error);
        }
        console.log('data recieved', data);
        console.log('image to new variable')
        const images = data;
        console.log('sending images');
        console.log('IMAGES', images);
        res.send(images);
    });
});

the handleSubmit() function on the client side can then be updated to make use of the /tag response as follows:

handleSubmit (event) {
    event.preventDefault();
    function sendTag () {
        axios
            .post('/tag', { tag: this.state.tag })
            .then( function(images) {
                console.log("AXIOS response:", images)
                this.setState({images: images})
            })
            .then(function () {
                console.log('state:', this.state);
            })
            .catch(function(error) {
                console.log(error);
            });
    }
    sendTag();
}