homework api...

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

const CustomButton = props => {
    return <button onClick={props.click}>{props.text}</button>;
  };

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        quotes: false,
        random: false,
        shown: false,
    };
  }

  componentDidMount = () => {
    fetch("https://programming-quotes-api.herokuapp.com/quotes/lang/en")
        // Transform the returned json string data into a real json object.
        .then(response => response.json())

        .then(data => this.setState({
                quotes: data,
                shown: data,
                max: data.length,
                offset: 0
            })
        );
  }

  handleRandomClick = () => {
    const min = 0;
    const max = this.state.quotes.length;
    const rand = Math.ceil(min + Math.random() * (max - min));
    
    return (
        console.log(rand),
        this.setState({
            shown :[this.state.quotes[rand]]
        })
    );
  }

  handle5Click = () => {
    if( this.state.max > this.state.offset+5){
      return (
        this.setState((state) => ({
          shown: state.quotes.slice(state.offset,state.offset+5),
          offset: state.offset + 5,
        }))
      )
    }
    // wos duma wenn ma am end san...fongan von furn on...
    else{
      return (
        this.setState((state) => ({
          offset: 0,
          shown: state.quotes.slice(state.offset,state.offset+5),
          
        }))
      )
    }

  }
  render() {
    return (this.state.quotes && <main>
        <div className="buttons">
            <CustomButton click={this.handleRandomClick} text="random" />
            <CustomButton click={this.handle5Click} text="show me 5" />
        </div>
        <ListContainer quotes={this.state.shown} />
        </main>);
    /*const randomquote = this.state.quotes[this.rand];
    const randNumb = this.state.random;s
    let arr = [];
    arr.push(this.state.quotes[randNumb]);
    if (!this.state.random) {
        return (
            <div>
                {console.log(arr)}
                <CustomButton click={this.handleRandomClick} text="random" />
                <CustomButton click={this.handle5Click} text="show me 5" />
            </div>
        );
    } else {
        return (
            <div>
                {console.log(this.state.quotes)}
                <CustomButton click={this.handleRandomClick} text="random" />
                <CustomButton click={this.handle5Click} text="show me 5" />
                <ListContainer quotes={arr} />
            </div>
        )
    }*/
  }
}

const ListItem = props => {
  const { quote, author } = props;
  return (
    <li>
      <span>{quote}</span>
      <span>
        {""} - <strong>{author}</strong>
      </span>
    </li>
  ); 
};

const Lists = props => {
    const quotes = props.quotes;
  //console.log("blu", quotes);
  /*if (quotes.isArray()) {
    const listItems = quotes.map(quote => (
        <ListItem key={quote.id} author={quote.author} quote={quote.en} />
    ));
    return listItems;
  } else if (typeof quotes === "object"){
    const listItems = <ListItem key={quotes.id} author={quotes.author} quote={quotes.en} />
    return listItems;
  }*/
  console.log(quotes);
  const listItems = quotes.map(quote => (
        <ListItem key={quote.id} author={quote.author} quote={quote.en} />
  ));
  return <ul>{listItems}</ul>;
  /*return <ul><ListItem author={quote.author} quote={quote} /></ul>*/
};

const ListContainer = props => {
  return <Lists quotes={props.quotes} />;
};

ReactDOM.render(<App />, document.getElementById("root"));

Ich habe eine neuen state gemacht, der die aktuellen angezeigten quotes speichert.
Somit ist die ganze Logik aus der renderfunction drausen.
und das 5er funktioniert so auch leicht.
Was sagst du dazu ?