Saya mengubah kode saya sehingga akan membawa informasi dari Firestore cloud alih-alih hardcodingnya. Ini adalah kode lama saya tanpa Firebase:

<div className="grid">
                <div className="grid-child">
                  <img className="subImg" src={amsterdam}></img>
                  <p className="subImgTitle">Amsterdam</p>
                  <p className="subImgText">Hotels from £?</p>
                </div>
                <div className="grid-child">
                  <img className="subImg" src={london}></img>
                  <p className="subImgTitle">London</p>
                  <p className="subImgText">Hotels from £?</p>
                </div>
                <div className="grid-child">
                  <img className="subImg" src={madrid}></img>
                  <p className="subImgTitle">Madrid</p>
                  <p className="subImgText">Hotels from £?</p>
                </div>
                <div className="grid-child">
                  <img className="subImg" src={paris}></img>
                  <p className="subImgTitle">Paris</p>
                  <p className="subImgText">Hotels from £?</p>
                </div>
              </div>

Dan ini adalah kode baru saya dengan Firebase:

destinations?.map(destination => {
          return (
            <div className="grid">
              <div className="grid-child">
                <img className="subImg" src={destination.img}></img>
                <p className="subImgTitle">{destination.title}</p>
                <p className="subImgText">Hotels from £{destination.price}</p>
              </div>
            </div>
          )
        })

Dalam kode asli, gambar semuanya berturut-turut namun sekarang mereka semua dalam satu kolom. Saya tidak terlalu yakin bagaimana cara memperbaikinya sehingga setiap bantuan akan sangat dihargai. Terima kasih :)

1
ajnabz 4 April 2021, 23:27

1 menjawab

Jawaban Terbaik

Jika Anda membandingkan DOM yang diberikan oleh setiap contoh, Anda akan melihat bahwa masalahnya adalah bahwa pada contoh pertama Anda memiliki satu <div className="grid"> tetapi pada detik Anda membungkus setiap gambar di <div className="grid">. Untuk memperbaikinya, pastikan untuk membuat hanya satu grid:

<div className="grid">
{ destinations?.map(destination => {
          return (
              <div className="grid-child">
                <img className="subImg" src={destination.img}></img>
                <p className="subImgTitle">{destination.title}</p>
                <p className="subImgText">Hotels from £{destination.price}</p>
              </div>
          )
        })
}
</div>

Sebagai langkah selanjutnya, pertimbangkan untuk refactoring komponen GridChild yang merangkum HTML untuk setiap gambar di grid.

1
Code-Apprentice 4 April 2021, 20:32