Paulos3000 Paulos3000 - 1 month ago 21
React JSX Question

Trying to implement a SIMPLE promise in Reactjs

Just trying out Promises for the first time in React. I have a basic promise working (ripped from someone else's code), but don't know how to adapt it to be useful.

What I have so far (within my

render()
function)

var promise = new Promise( (resolve, reject) => {

let name = 'Dave'

if (name === 'Dave') {
resolve("Promise resolved successfully");
}
else {
reject(Error("Promise rejected"));
}
});

promise.then(function(result) {
console.log(result); // "Promise resolved successfully"
}, err => {
console.log(err); // Error: "Promise rejected"
});


Sure enough, as the promise conditional is matched (
name === 'Dave'
), my console logs
Promise resolved successfully
.

However, I don't know how to assign a value to a variable when using the promise. For example:

promise.then(function(result) {
var newName = 'Bob'
}, function(err) {
var newName = 'Anonymous'
});


And then when I try to return this value in
render()
's return statement, like so:

<h2>{newName}</h2>


It says newName is undefined.

I have also tried:

promise.then(function(result) {
var newName = result
}, function(err) {
var newName = error
});


...expecting this would assign the
resolve
or
error
string into
newName
variable, but nope.

Am I thinking about this the wrong way? How can I make this more useful than just logging a string when my conditional is met?

Any help would be appreciated, because this is really making my head hurt...




Update



render() {

var promise = new Promise( (resolve, reject) => {

let name = 'Paul'

if (name === 'Paul') {
resolve("Promise resolved successfully");
}
else {
reject(Error("Promise rejected"));
}
});

let obj = {newName: ''};

promise.then( result => {
obj["newName"] = result
}, function(error) {
obj["newName"] = error
});

console.log(obj.newName)

return (
<div className="App">
<h1>Hello World</h1>
<h2>{obj.newName}</h2>
</div>
);
}

Answer

You are using React in a wrong way. A Promise is designed to return result at a later point of time. By the time your promise has been resolved or rejected, your render would have finished execution and it wont update when the promise completes.

render method should only depend on props and/or state to render the desired output. Any change to prop or state would re-render your component.

  • First, identify where your Promise should go in the life cycle of the component(here)
  • In your case i would do the following

    • Initialize an state inside your constructor(ES6) or via getInitialState

      constructor(props) {
        super(props);
        this.state = {
          name: '',
        };
      }
      
    • Then on componentWillMount or componentDidMount which ever suits you, call the promise there

      componentWillMount() {
       var promise = new Promise( (resolve, reject) => {
      
        let name = 'Paul'
      
        if (name === 'Paul') {
         resolve("Promise resolved successfully");
        }
        else {
         reject(Error("Promise rejected"));
        }
       });
      
       let obj = {newName: ''};
      
       promise.then( result => {
        this.setState({name: result});
       }, function(error) {
        this.setState({name: error});
       });
      }
      
    • Then in render method write something similar to this.

      render() {
       return (
        <div className="App">
         <h1>Hello World</h1>
         <h2>{this.state.name}</h2>
        </div>
       );
      }
      
Comments