snippet.js

//This is my json array
const myArray = [data1, data2, data3, data4, data5];

console.log("seraphine testing ", [myArray[0] + 1]);

class App extends Component {
  constructor() {
    super();
    this.state = {
      articleIndex: 0
    };

    this.handleClick = this.handleClick.bind(this);
    this.backwardClick = this.backwardClick.bind(this);
  }

  // I am trying to render the ranking component here, if this condition is met.
  handleClick() {
    updateArraynum = updateArraynum + 1;

    if (updateArraynum > myArray.length) {
      console.log("checking length of array", myArray.length);
      // I want this component to render if that condition is true
      return (
        <div>
          <Ranking
            mydata1={data1}
            mydata2={data2}
            mydata3={data3}
            mydata4={data4}
            mydata5={data5}
          />
        </div>
      );
    } else {
       
      this.setState({
        // There is a bit naunce here, but we can talk about that in a bit
        articleIndex: this.state.articleIndex + 1
      });
      console.log("testing", updateArraynum);
    }
  }

  backwardClick() {
    console.log("backwardClick");
    this.setState({
      articleIndex: this.state.articleIndex - 1
    });
    console.log("back", updateArraynum);
  }

  render() {
    return (
      <div className="container">
        <div>
          <Myarticle article={myArray[this.state.articleIndex]} />
        </div>
        <div>
          <Navigation
            handleClick={this.handleClick}
            backwardClick={this.backwardClick}
          />
        </div>
      </div>
    );
  }
}
export default App;