Returns obeject promise reactjs

JavaScript
#1

im new on programming i’m using fetch but dont know why im getting [object Promise], how to get information from that site and not [object Promise] ?

   state = {
        contents : null
    };
    componentDidMount() {
        const proxyurl = "https://cors-anywhere.herokuapp.com/";
        const url = "http://*****.*****.com/numbers.txt";
        fetch(proxyurl + url)
            .then(response => response.text().toString().split("\n").map(num => num.trim())) //split on each line, remove pre and post spaces.
            .then(contents  => this.setState({ contents  }));
    }
    render() {
        return (
            <div>
                <div >{this.state.contents }</div>
            </div>
        );
    }
#2

fetch returns a Promise. That is just how it works. What is the url of the site?

#3

From that site i should get numbers under eachother like this 59:499 60:498.

#4

Try the following:

.then(response => response.text())
.then(results  => {
  const contents = results.split("\n").map(num => num.trim());  //split on each line, remove pre and post spaces.
  this.setState({ contents  });
});
1 Like
#5

this is what im seeing :

1. ["[object Promise]"]

  1. 0: "[object Promise]"
  2. length: 1
  3. __proto__: Array(0)
#6

See my edited reply above.

#7

everything is after each other, how to put them under eachother ? in the website code is put like this : style=“word-wrap: break-word; white-space: pre-wrap;” i want them to be under each other like this 5:789
6:987

#8

I am not sure what you are asking. I would need to see more of your code to understand what you are currently doing. Does state now contain a property named “contents” which is an array of the strings you wanted?

#9

thank you for your code, its working but the numbers im getting from that site are like this now 5:8995:8995:8995:899 but i want them to be under each other like this 5:899
5:899
and could you possibly explain why my code was not working properly ?

#10

Again, unless you can show the code which creates the html for how you are displaying the numbers, I can not help you. I need to see the html structure and how you are referencing the data in this.state.contents.

The text() method returns a promise, so you were not going to get any workable data until then 2nd then method.

#11

in html i have nothing just this

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  
</body>

and my index.js

ReactDOM.render(<div><nappula /></div>, document.getElementById("root"));

i have nothing else

#12

You are using React, so I need to see the code which renders the html from this.state.contents.

#13

my index.js

ReactDOM.render(<div><Nappula /></div>, document.getElementById("root"));

i have nothing else

#14

What does the code for the nappula component look like? Have you studied React before or are you just trying to hack code you found somewhere else? When I asked for you to post the code which renders the html structure, you should already know I meant the code which displays this.state.contents.

I strongly advise you to look at our React curriculum to help you get better acquainted with React.

#15

i have studied react, nappula component is the one code which i posted in the beginning
this:

import React, { Component } from "react";
export default class Nappula extends Component {
 state = {
        contents : null
    };
    componentDidMount() {
        const proxyurl = "https://cors-anywhere.herokuapp.com/";
        const url = "http://*****.*****.com/numbers.txt";
        fetch(proxyurl + url)
            .then(response => response.text().toString().split("\n").map(num => num.trim())) //split on each line, remove pre and post spaces.
            .then(contents  => this.setState({ contents  }));
    }
    render() {
        return (
            <div>
                <div >{this.state.contents }</div>
            </div>
        );
    }
}
#16

Sorry about that. this.state.contents is an array, so unless you iterate through it to display it with some other html structure, it is just going to display like you mention (all in the same line). If you want to display each number on separate lines, think about the html structure needed to do that. You could use an unordered list or just div elements. You can use the map to create the necessary html structure for this, but I will first let you attempt to write the code yourself instead of just showing you how to do it. We have a great React course which shows you how to do such things.

#17

this should do it :

split("\n")

but its not working, it should make them go under eachother as i have put it in the code

#18

This just splits the string data you received from the fetch call by end of line character. The actual data in the contents array, are just numbers. There is no styling or html associated with each number from what you have explained to me.

#19

thank you for helping me, you said about specific react course on this, could you send link to that part.

#20

Based on the fact that you seemed not to understand what the split("\n") was doing for you, I would actually recommend you take our Basic JavaScript section first (starting with the Store Multiple Values in one Variable using JavaScript Arrays challenge) and then work through the React section.