React ajax test

by Financial Modeling Prep

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.12.0/axios.js"></script>
<div id='app'>
</div>
<div id="foo"></div>

CSS

body {
  margin: 20px;
  font-size: 18px;
  font-family: Arial;
}

ul {
  list-style: none;
  padding: 0;
}

Babel + JSX

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: null
    }
  }
 }
 

class SearchForm extends React.Component {

  handleSubmit(event) {
    event.preventDefault();
    const data = [...event.target.elements].reduce((data, element) => {
     if (element.name && element.value) {
        data[element.name] = element.value;
      }
  
      return data;
    }, {});
    
   let url = `https://financialmodelingprep.com/api/v3/search?query=${data.query}&limit=10&apikey=demo`;
    if(data.exchange !== 'ALL') {
    	url = `https://financialmodelingprep.com/api/v3/search?query=${data.query}&limit=10&&				exchange=${data.exchange}&apikey=demo`
    }
    

    	axios.get(url)
    .then((res) => { 
    
    	let array = res.data;
      
      $('#foo').empty();

      var list = $('<ul/>');  
      for(let i = 0; i < array.length; i++) {
        	let item = $('<li/>');
          item.append(array[i].symbol+' | '+ array[i].name+' | '+ array[i].stockExchange );
       		list.append(item);

      }
 
			$('#foo').append(list);
			
    })
  };
  

  render() {
    return (
      <form action="/search" onSubmit={this.handleSubmit}>
        <input type="text" name="query" />
        <select name="exchange" defaultValue={'ALL'}>
          <option value="ALL">ALL</option>
          <option value="NASDAQ">NYSE</option>
          <option value="NYSE">NASDAQ</option>
          <option value="AMEX">AMEX</option>
          <option value="EURONEXT">EURONEXT</option>
          <option value="TSX">TSX</option>
          <option value="MUTUAL_FUND">MUTUAL_FUND</option>
          <option value="COMMODITY">COMMODITY</option>
          <option value="INDEX">INDEX</option>
          <option value="CRYPTO">CRYPTO</option>
          <option value="FOREX">FOREX</option>
          <option value="TSX">TSX</option>
          <option value="AMEX">AMEX</option>
          <option value="EURONEXT">EURONEXT</option>
        </select>
       ...