/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

0 vote337 views2 answers
CSS Or Selector
CSS
10 votes322 views2 answers
Line-height css
CSS
1 vote335 views3 answers
Rainbow text css
CSS
10 votes325 views3 answers
Hiding text css and leaving whitespace
CSS
18 votes323 views6 answers
Css box sizing
CSS
37 votes353 views1 answer
Placeholder font size
CSS
0 vote351 views1 answer
How to install tailwind cdn
CSS
1 vote291 views1 answer
Css round outline
CSS
22 votes324 views5 answers
Css grid center
CSS
2 votes323 views1 answer
Textarea only one line
CSS