I'm trying to display all the minted tokens on the front page of my dapp, so I created an array in solidity and pushed the tokenId to it, then tried using a spread operator, and mapping it to the tokenURI's. Unfortunately, I haven't been able to get the image to display it.

      for (let i = 1; i <= totalSupply; i++) { //this is listing an array of minted tokens
        const tokenURI = await contract.methods.tokenURI(i - 1).call()
        const imageURI = await tokenURI.image
        // how should we handle the state on the front end
        this.setState({
          NFTz: [...this.state.NFTz, imageURI] // spread operator
        }) // pretty sure the array could be done on the front end

      }
      console.log(this.state.imageURI)
      console.log(this.state.NFTz)

The console returns:

index.js:1437 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `App`. See fb.me/react-warning-keys for more information.
    in div (at App.js:136)
    in App (at src/index.js:7)

It's rendered it onto MDBcards with:

<div className="row textCenter">
            {this.state.NFTz.map((key, imageURI) => {
              return (
                <div>
                  <div>
                    <MDBCard className="token img" style={{ maxWidth: '22rem' }}>
                      <MDBCardImage src={imageURI} position='top' height='250rem' style={{ marginRight: '4px' }} />
                      <MDBCardBody>
                        <MDBCardTitle></MDBCardTitle>
                        <MDBCardText></MDBCardText>
                        <MDBBtn href={imageURI}>Download</MDBBtn>
                      </MDBCardBody>
                    </MDBCard>
                  </div>
                </div>

PS: Err, probably more efficient to create an array on the front end, instead of in solidity.

Thank you and God Bless