/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 vote193 views2 answers
Modal pop up html css
CSS
-1 vote161 views1 answer
Css tricks position
CSS
0 vote190 views1 answer
Css two classes in one element
CSS
0 vote185 views2 answers
How to take of underline from link through css
CSS
1 vote186 views1 answer
System.FormatException: 'String '09-03-2020' was not recognized as a valid DateTime.'
CSS
3 votes197 views1 answer
Watch scss to css
CSS
20 votes158 views5 answers
Background color transparent opacity css
CSS
1 vote178 views1 answer
Edit hover with sass
CSS
0 vote179 views2 answers
Mask image css
CSS
-1 vote142 views1 answer
Responsiveness in bootstrap
CSS