React with ES6

[pinglinh]

Hi, I wanted to write the code in ES6, however nothing is being returned. Can someone check my code please?

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script type="text/babel">
class Ninjas extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ninjas: []
    };
  }

  handleSubmit(e) {
    e.preventDefault();
    let lng = this.refs.lng.value;
    let lat = this.refs.lat.value;

    fetch(`/api/ninjas?lng=${lng}&lat=${lat}`)
      .then(data => {
        return data.json();
      })
      .then(json => {
        this.setState({
          ninjas: json
        });
      });
  }

  render() {
    let ninjas = this.state.ninjas;

    ninjas = ninjas.map((ninja, index) => {
      return (
        <li key={index}>
          <span className="name">{ninja.obj.name}></span>
          <span className="rank">{ninja.obj.rank}</span>
          <span className="dist">{Math.floor(ninja.dis / 1000)} km</span>
        </li>
      );
    });

    return (
      <div id="ninja-container">
        <form id="search" onSubmit={this.handleSubmit.bind(this)}>
          <label>Enter your latitude</label>
          <input type="text" ref="lat" placeholder="latitude" required />
          <label>Enter your longitude</label>
          <input type="text" ref="lng" placeholder="longitude" required />
          <input type="submit" value="Find Ninjas" />
        </form>
        <ul>{ninjas}</ul>
      </div>
    );
  }
}

ReactDOM.render(<Ninjas />, document.getElementById("ninjas"));
</script>

[Dynamic-Gravity]

Related to #6 ?

[pinglinh]

@Dynamic-Gravity I don't think so because I am importing react 16.0. I'm used to using ES6 for React so wanted to use this instead. However I'm finally getting an error message on the console: Uncaught TypeError: Cannot read property 'refs' of undefined

[Dynamic-Gravity]

@pinglinh Ahh I see.

[pinglinh]

Have you tried using MongoDB on a Mac

[Dynamic-Gravity]

@pinglinh No, I only use Linux. Post your repo down below and I'll see if I can get it working and send a PR.

[pinglinh]

@Dynamic-Gravity Thanks!! https://github.com/pinglinh/rest_api_tutorial It looks like the API can't connect to my database now...I'm trying to do a GET request on postman but it doesn't work

[pinglinh]

@Dynamic-Gravity Ok it now works on windows machine (tried on Mac last night it didn't work) but in console it now says cannot read name of undefined so the problem is in the React code. If I try to not bind the handleSubmit method I get `cannot read property 'refs' of undefined.

[nikolisan]

Did you use babel?