Breaking News: Grepper is joining You.com. Read the official announcement!

Make changes to api fetch onclick in react

Imoptimal answered on December 10, 2021 Popularity 3/10 Helpfulness 2/10

answer Make changes to api fetch onclick in react

Make changes to api fetch onclick in react

Comment

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>
    );
  }
}

Popularity 3/10 Helpfulness 2/10 Language css

Source: stackoverflow.com

Tags: api css fetch onclick

Link to this answer
Share Copy Link

Contributed on Dec 10 2021

Imoptimal

0 Answers Avg Quality 2/10

Make changes to api fetch onclick in react

Contents

More Related Answers

Make changes to api fetch onclick in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.