React - Nested .map() returns no elements?-CodePudding

I'm trying to render a nested array of images in a specific grid format, where the amount of columns is passed to the component.

I have a 2D array full of image src's. I first map through the outerArr to create columns (this works as intended). But when I try to map through the inner elements, nothing is returned. I have played around with explicit or implicit returns, but can't seem to get this working. Also upon inspecting the elements I can see nothing is being rendered inside of the column elements.

If I map just a single dimension of the array ([0][x]), I can render the jsx, but not if it's nested. Is there an element to a nested map that I'm missing?

let NFTPayload = [
  NFT1,
  NFT2,
  NFT3,
  NFT4,
  NFT1,
  NFT2,
  NFT3,
  NFT4,
  NFT1,
  NFT2,
  NFT3,
  NFT4,
  NFT1,
  NFT2,
  NFT3,
  NFT4,
  NFT1,
  NFT2,
  NFT3,
];
const NFTGallery = (props) => {
  // state is set to an empty array, ready to store the NFT payload
  const [NFTPayload, setNFTPayload] = useState([]);
  const itemCount = NFTPayload.length - 1;
  const rowCount = Math.round(itemCount / props.columnCount);
  let nftArr = [...Array(props.columnCount)].map((e) => Array(rowCount));
  console.log('Row count is ', rowCount);
  console.log('Item length count is ', itemCount);
  console.log('Column count is ', props.columnCount);
  //const rowCount = itemCount /;

  useEffect(() => {
    setNFTPayload(smartContractArrayOfNFTs);
  }, []);

  useEffect(() => {
    NFTPayload.reverse();
    for (let i = 0; i < props.columnCount; i  ) {
      let outerCounter = 0;
      for (let j = 0; j < rowCount; j  ) {
        nftArr[i][j] = 
        NFTPayload[outerCounter];
        outerCounter  ;
      }
    }
  }, [NFTPayload]);

  return (
    <>
      <section className={styling.testContainer}>
        {nftArr && 
        nftArr.map((ele, outerIdx) => (
          <div key={outerIdx} className={styling.testColumn}>
            {
              ele.map((item, innerIdx) => (
                return(
                <img src={item}></img>
                )
              ))
            }
          </div>
        ))}
      </section>
    </>
  );
};

export default NFTGallery;

CodePudding user response：

You see the problem is that whenever the dependency changes you change it again triggering an infinite loop with useEffect. Isn't it possible to remove NFTPayload from the deps and calculate only on mount?

CodePudding user response：

Does your code snippet contain everything? In the current context, arr is undefined. I'm assuming it's defined somewhere, otherwise you should be encountering other errors. If there's more code, if you can add it to your code snippet, that will be helpful.