Assigning a property with ES6 in a React Component

Question

I am new to ES6 and still trying to grasp the concepts of the new specifications, i am currently working on a component in React where i need to make an ajax call and store this response in an object. Then use this object to the map the necessary elements

My component looks like the following

export class App extends Component {
    search(){
      //make ajax call
      response = obj.responseText;
    }

    getValues(){}

    render(){
     let result = response.data.map(this.getValues);
     return(
       <div onKeyDown={this.search.bind(this)}>{result}</div>
     )
    }

}

How do i declare the "response" variable globally which gets assigned the data from ajax call "obj.responseText"?

Answer 1

It seems like you know what you want to achieve, but are a little confused about how to get there.

I would highly recommend reading the React documentation before you go any further.

Why not global variables?

How do I declare the response variable globally?

In short, don't. Global variables are well-documented as being evil. One instance of this component in a page with a global variable to store its search results would be fine, but imagine if you had two or more instances - they would all share/overwrite each other's search results.

Introducing state

Instead, you want to use React's component state functionality to store your search results.

You can set an initial state by setting a component's this.state in its constructor, (or in ES5, define a getInitialState method on the component).

Then, any time you want to update the component's state, you can call its this.setState(...) method, passing in a new state object. This will also trigger a re-render of the component.

Example

Here is a simple implementation following the above pattern:

export class App extends Component {

  // Set the initial state of the component in the constructor
  constructor(props) {
    super(props);
    this.state = {};
  }

  // This gets called when your component is mounted
  componentDidMount() {
    // Here we make our AJAX call. I'll leave that up to you
    performMyAjaxMethodDefinedSomewhereElse(result => {

      // We call this method to update `this.state` and trigger re-rendering
      this.setState({ result });
    });
  }

  render() {
    // If we haven't received any results yet, display a message
    if (!this.state.result) {
      return (
        <div>No results!</div>
      );
    }

    // Iterate over the results and show them in a list
    const result = this.state.result.map(text => (<li>{text}</li>));

    // Display the result
    return (
      <ul>{result}</ul>
    );
  }
}

Naturally, if you don't want the AJAX call to fire off immediately, you can use a very similar approach, replacing componentDidMount with an event handler which looks almost identical.