/CSS/Make changes to api fetch onclick in react

Make changes to api fetch onclick in react

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: false,
      results: [],
      error: null,
    };
  }

  fetchData = (url, query, key) => {
    fetch(`the/api/${url}${query}.json?api-key${key}`)
      .then(res => res.ok && res.json())
      .then(data => this.setState({ results: data.results, isLoading: false }))
      .catch(error => this.setState({ error, isLoading: false }));
  }

  componentDidMount() {
    fetchData('api_url', 'all', 'key_here');
  }

  handleCategory = (e) => {
    const cat = e.target.getAttribute('data-facet');
    fetchData('api_url', cat, 'key_here');
  }

  render() {
    const { isLoading, results, error } = this.state;

    if (isLoading) {
      return <div className="loading-icon"></div>
    }

    if (error) {
      return <div className="error"></div>    
    }

    return (
      <div className="wrapper">
        <button data-facet="arts" onClick={this.handleCategory}>Arts</button>
        {results.map(res => ...)}
      </div>
    );
  }
}

Source: stackoverflow.com

Similar codes

37 votes263 views1 answer
Css placeholder font size
CSS
19 votes193 views3 answers
Css round element
CSS
43 votes228 views4 answers
Scale css
CSS
28 votes214 views3 answers
Google font roboto
CSS
3 votes238 views1 answer
Css supports
CSS
0 vote213 views1 answer
Media query Tablet and smaller
CSS
0 vote163 views1 answer
Video camera icon font awesome
CSS
0 vote204 views1 answer
Css for chrome only
CSS
0 vote241 views1 answer
How to set the scroll in bootstrap4 table body
CSS
0 vote230 views1 answer
Cop pics css
CSS