React ajax test

by Aashish Manandhar

HTML

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

Babel + JSX

function App() {
  const [selected, setSelected] = React.useState(null);
  const [search, setSearch] = React.useState("");

  React.useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/users").then(res => {
      setSelected(res.data);
    });
  }, []);

  console.log(selected);
  // console.log(selected.name)
 if(!selected) {
  return null;
}
console.log("selected", selected)

  return (
    <div className="App">
      <div>Names below</div>
      <input
        type="text"
        value={search}
        onChange={e => {
          e.preventDefault();
          setSearch(e.target.value);

          const name = selected.filter(
            select => select.name === search,
            selected
          );
        }}
      />
      <div className="list">{selected[0].name}</div>
    </div>
  );
}


ReactDOM.render(<App />, document.querySelector('#app'))