map over a array based on prop name, ReactJS

As Alan pointed out, I think the main problem is that when you are referring to this, it is not bound to the main component. For functions that are not part of the standard React component lifecycle (constructor, render, componentDidMount, etc), you must explicitly state that you bind it to the component like this

constructor(props)
{
  super(props)
    this.state = {};

    this.PopulateProductSquares = this.PopulateProductSquares.bind(this);
}

That by itself should resolve the immediate problem you are facing.

In addition, I would point out a few things that would make your component a little bit easier to read. For example, having the internal function PopulateProductSquares start with a capital letter, makes us think that it is a Class or Component, so I would rename that populateProductSquares (or renderProductSquares in my personal opinion to indicate what it does).

Secondly, when you are looping through the products, you don't need to refer to this.props.arrayId[i] since each object is already passed as the product argument in the function (product, i) => when you use map.

And you don't need to assign the result from this.props.arrayId.map(...) to an constant since you are returning it right away.

Lastly, since the only thing you are doing in the render method is to call the PopulateProductSquares function, it doesn't make sense to separate it into a separate function, you could just write it all directly in render (as Alan also pointed out). But there are a lot of useful cases where you do want to have it in a separate function, so I think it is important to understand the requirement for binding functions.

To summarise, here is how I might have done it (with a slightly different render function to showcase when you might want to have separate functions).

class ProductSquare extends Component {

  constructor(props)
  {
    super(props)
    this.state = {};

    this.renderProductSquares = this.renderProductSquares.bind(this);
  }

  renderProductSquares()
  {
    return this.props.arrayId.map((product, i) =>
      <div className = "ProductSquare" key={i}>
        <img  className = "MainImage" src ={product.productImage}  alt = "test"/>
        <img  className = "CompanyImage" src ={product.companyImage} alt = "test"/>

        <button className = "AddButton">
          Add 
        </button>

        <button className = "InfoButton">
          Info
        </button>
      </div>
    );
  }

  render() {
    return (
      <div>
        <h1>Here are a bunch of product squares</h1>
        {this.renderProductSquares()}
      </div>
    );
  }
}

export default ProductSquare;

I'll take a swing at what you are trying to do here:

<ProductSquare arrayId="door" />

In order to get to the door array of your ProductInformation.js file, it would probably be better to have a default export:

/* ProductInformation.js */
export default {
  door: [/* ...door info*/]
  window: [/* ...window info */],
};

Then when you import it, you would:

import products from "./ProductInformation.js";

For your map function, you would want to use your products import with your props.arrayId:

const ProductSquares = products[this.props.arrayId].map(...);

In your current code, you are trying to map over the string prop you are passing to your component. What you want is to index the correct product array. You need to either create the default export (written above), or create a map in your render function:

const productMap = { door: door, window: window };
const ProductSquares = productMap[this.props.arrayId].map(...);