Как переключить кнопку ВКЛ / ВЫКЛ, которая выбирает данные из API?

Question

Я написал свой код, в котором я должен извлекать данные из API для кнопки, но для более простой и понятной страницы я хочу иметь кнопку переключения, но я не знаю, как реализовать ее в моей функции и в моем методе рендеринга.

Я пробовал с состоянием и функцией, но не знаю, как написать это в рендере.

import React from "react";
import "./FetchBeerStyle.css";

export default class FetchBeer extends React.Component {

        constructor(props) {
          super(props);
          this.state = {
            beers: [],
            on:false,
          }
        }

        handleClick = () => {
          fetch('https://api.punkapi.com/v2/beers')
          .then(res => {
            if (!res.ok) {
              throw new Error('There has been an error');
            }
            return res.json();
          })
          .then(data => {this.setState({ beers: data})
                        console.log(this.state.beers);
        })
          .catch(e => console.log(e))
        }


        render(){
        return (
          <div>
            <button onClick={this.handleClick}>Get All Beers/Return</button>
           {this.state.beers.map((beer) => {
             return <div key={beer.id}>
               <h1 className="h1" >NAME : {beer.name}</h1>
               <img src= {beer.image_url}/>
               <h2>TAGLINE : {beer.tagline}</h2>
               <p>FIRST BREWED : {beer.first_brewed}</p>
               <p> DESCRIPTION : <br></br>{beer.description}</p>
               <p> FOOD PAIRING : <br></br>{beer.food_pairing}</p>
               <p> ALCOHOL BY VOLUME(%) : {beer.abv}</p>
               <p> pH : {beer.ph}</p>


               </div>

           })}
          </div>
        );
        }
      }

Answer 1

Вы можете проверить, является ли кнопка истинной или ложной, тогда вы рендерите свои данные.Также вам нужно вызвать другую функцию, которая изменяет состояние вашей кнопки при нажатии, и вызвать функцию «handleClick» для извлечения данных.

`{
this.state.on ?
this.state.beers.map((beer) => {
     return <div key={beer.id}>
       <h1 className="h1" >NAME : {beer.name}</h1>
       <img src= {beer.image_url}/>
       <h2>TAGLINE : {beer.tagline}</h2>
       <p>FIRST BREWED : {beer.first_brewed}</p>
       <p> DESCRIPTION : <br></br>{beer.description}</p>
       <p> FOOD PAIRING : <br></br>{beer.food_pairing}</p>
       <p> ALCOHOL BY VOLUME(%) : {beer.abv}</p>
       <p> pH : {beer.ph}</p>


       </div>

   })

: null} `