React component running 8 times and the props are cleared except for 4th and 5th run

Question

I am working on creating my first React web app with the spotify API. For the web app, you choose a specific date and it displays some of the popular songs released on that day. I then send an array of those songs though various components, all with no issues but one. I discovered that said component was actually getting the props correctly, then clearing them. Here is the code:

import React from "react";
import "./TrackList.css";
import "../Track/Track";
import Track from "../Track/Track.js";
let i = 1;

class TrackList extends React.Component {
  getProps() {
    console.log(this.props.tracks);
    console.log("this component has ran " + i + "times.");
    i++;
  }
  render() {
    this.getProps();
    return (
      <div className="TrackList">
        {this.props.tracks.map((track) => (
          <Track
            track={track}
            key={track.id}
            onAdd={this.props.onAdd}
            onRemove={this.props.onRemove}
            isRemoval={this.props.isRemoval}
          />
        ))}
      </div>
    );
  }
}

export default TrackList;

The console will then output that it ran 5 times, and the correct array. It runs for a total of 8 times, and none of the arrays have anything in it other than the 5th one.

**^^ array with song names in it is the correct one.

How come it is running multiple times and how do I stop if from clearing??

I have tried making new props and making it equal to this.props.track when i = 5, however my screen just went white.

The code looked like: **

import React from "react";
import "./TrackList.css";
import "../Track/Track";
import Track from "../Track/Track.js";
let i = 1;

class TrackList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fixedArray: [],
    };
  }

  getProps() {
    console.log(this.props.tracks);
    console.log("this component has ran " + i + "times.");
    i++;

    if (i === 5) {
      this.props.fixedArray = this.props.tracks;
    }
  }
  render() {
    this.getProps();
    return (
      <div className="TrackList">
        {this.props.fixedArray.map((track) => (
          <Track
            track={track}
            key={track.id}
            onAdd={this.props.onAdd}
            onRemove={this.props.onRemove}
            isRemoval={this.props.isRemoval}
          />
        ))}
      </div>
    );
  }
}

export default TrackList;