form.jsx

class Form extends Component {
  constructor() {
    super();
    this.state = {
      // state initialization
      clickEvent: '',
      ready: '',
      input: '',
      SearchBy: '',
      select: '',
      song: [],
   
    };
    this.addInput = this.addInput.bind(this);
    this.search = this.search.bind(this);
    this.SearchBy = this.SearchBy.bind(this);
    // this.clearResult = this.clearResult.bind(this);
  }
  addInput(event) {
    this.setState({
      input: event.target.value,
    })
  }

  SearchBy(event) {
    this.setState({
      select: event.target.value,
    })
  }
 
  search(event) {
    event.preventDefault();
    const {input, select} = this.state;
    // const {select} = this.state;
    this.setState({
      ready: 'loading',
      input: '',
      select: '', 
    });
    
    axios({
      mode: 'no-cors',	    
      method: 'get',
      url: `https://cors-anywhere.herokuapp.com/https://api.deezer.com/search/${select}?q=${input}`,
      headers: {Authorization: `Bearer e9d874c859b7133d36df9b5bcd38512d`}
    })
    // axios.get(`https://api.deezer.com/search/${select}?q=${input}`)
    .then(({ data:{data} } ) =>{
      const {select} = this.state;
        console.log(data);
        this.setState({
          ready: 'loaded',
          song: data,
          select: '',
        })
        
    })
    .catch(err =>{
      console.log(error);
      this.setState({
        ready: 'error'
      })
    })
  }
  render() {
    const {song} = this.state;
    return (
      <Formstyle onSubmit={this.search}>
      <input onChange={this.addInput} type="text" name="search" placeholder="search tracks, artist..." />
      
          <select id='selected' name="category" placeholder="category" onChange={this.SearchBy}>
            <option value="album" id="album">album</option>
            <option value="artist" id="artist">artist</option>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
            <option value="track" id="track">track</option>
          </select > 
       
        //this links to the Result.jsx page
       <button type="submit"><Link to={`/song/`}>Search</Link></button>
      </Formstyle>
    );
  }
} 

export default Form;