Cacher is the code snippet organizer for pro developers

import React, { Component } from 'react';
import Footer from '../footer/Footer';
import MyButton from '../myButton/MyButton';
import './AnswerPage.css';
import { Container } from 'reactstrap';

const ApiUrl = 'http://jservice.io/api/clues?category=42';

export default class AnswerPage extends Component {
  constructor(){
    super();
    this.state = {
      dataApi : [{question: 'Please wait.'}]
    };
    fetch(`${ApiUrl}`) //fetch(`${ApiUrl+ questionCategory`) 
      .then((response) => response.json())
      .then((data) => this.setState({dataApi: data}))
      .catch((error) => console.log(error));
  }
  questionAlea(clues){
    if(clues[0] === null) {
      console.log(clues[0].question);
    } else {
      return clues[Math.floor(Math.random() * clues.length)].question;
    }
  }
  render() {
    return (
      <Container className="container-setting">
        <React.Fragment>
          <div className='mainBody'>
            <h1>PLAYER 1</h1>
            <p>
              {this.questionAlea(this.state.dataApi)}
            </p>
            <MyButton text="I'm winning" url='/congratulations' />
            <Footer />
          </div>
        </React.Fragment>
      </Container>
    );
  }
}