React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.display{
  background-color:#b6d0f9;
  margin-top:10px;
  padding-top:10px;
  padding-bottom:10px;
}
.role{
  color:red;
}
#searchbar{
  margin-right:150px;
}

Babel + JSX

class Hello extends React.Component {

 constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      data: [],
      searchString:''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  handleChange(e){
     this.setState({ searchString:e.target.value });
   }

  fetchData() {
    fetch("https://api.myjson.com/bins/kr5kk")
      .then(response => response.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          data: json
        });
      })
      .catch(error => console.log("parsing failed", error));
  }



  render() {
  	var { isLoaded, data } = this.state;
  const searchString = this.state.searchString.trim().toLowerCase();
  let text = this.state.data;
  console.log(text);
  if (searchString.length > 0) {
     text = text.filter(info=> {
           return info.role.toLowerCase().match( searchString );
         });
     }
    return (
    	<div>
       <input type="text" id="searchbar" value={this.state.searchString} onChange={this.handleChange}
           placeholder="Search by Role" name="device">
       </input>
                   
    	  <select className="category-select" name="categories">
           {text.map(info => (
              <option value={info.role}>{info.role}</option>
            ))}
         </select>
         {text.map(info => (
         <div className="display">
            <span className="role">Role: {info.role}</span><span>, Salary: {info.salary}</span>
         </div>
          ))}
    	</div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);