thắc mắc Hỏi về mapbox trong reactjs , mong các thím giúp

Như tit ạ các thím cho em hỏi với là kiểu em có một cái web về tìm kiếm thông tin nhà hàng,quán ăn du lịch , dùng api của Travel advisor và map thì của mapbox. Bây giờ em đang vướng một vấn đề chưa nghĩ ra là khi mà click vào marker trên bản đồ (marker này đã đánh dấu những điểm của quán ăn), thì mình phải làm cách nào đó mà khi click vào đó thì cái thằng list bên trái (như hình) nó phải scrollIntoView tới đúng cái quán ăn đó luôn .Ý Tưởng của em là khi click vào thằng marker thì nó sẽ lấy 1 unique value nào đó rồi sẽ so sánh với unique value nào đó của thằng bên trái rồi khi nó bằng nhau thì sẽ scrollIntoView đến nhưng em đang ko có cách nào tìm ra được ạ . Mong các thím giúp , em cảm ơn .

Api em sử dụng : https://rapidapi.com/apidojo/api/travel-advisor
Code của em đây ạ: https://github.com/munkylo7578/map-test

có thể navigate tới id của card bên trái để scroll tới nó.

https://codepen.io/boylavua18/pen/ExXJYRy

boylavua18 đã nói:

có thể navigate tới id của card bên trái để scroll tới nó.

https://codepen.io/boylavua18/pen/ExXJYRy

Nhấp để mở rộng...

Nhưng vấn đề là em ko tìm được cách để navigate tới id của thằng card bên trái ấy ạ

1. Thím thớt đã có thể bắt sự kiện khi click vào Marker và callback được cái id của nhà hàng tương tự code mẫu của thím ở trên chưa?

2. Để scroll tới 1 element trong React thì thím có thể dùng ref
Đầu tiên tạo 1 mảng ref (hoặc object cũng đc) để lưu tất element cho cái list bên trái
Khi click có được id thì query đúng cái ref với id đó ra rồi gọi hàm
scrollIntoView

Đây mình có code demo cho thím thớt dùng object để lưu danh sách ref
https://codesandbox.io/s/react-scroll-to-element-wkgoe

boylavua18 đã nói:

Mã:

const handleClick = (_id) => navigate("#id nhà hàng")

<Marker  
      className={classes.markerContainer}
      latitude={+place.latitude || 0}
      longitude={+place.longitude || 0}
      key={i} // index cho key ko ổn
>
    <div className="cover" onClick={() => handleClick(id của nhà hàng ở đây)}> // bắt sự kiện chỗ này, div phủ bao quanh marker
         ...
    </div>

</Marker>

Nhấp để mở rộng...

jona_ma đã nói:

1. Thím thớt đã có thể bắt sự kiện khi click vào Marker và callback được cái id của nhà hàng tương tự code mẫu của thím ở trên chưa?

2. Để scroll tới 1 element trong React thì thím có thể dùng ref
Đầu tiên tạo 1 mảng ref (hoặc object cũng đc) để lưu tất element cho cái list bên trái
Khi click có được id thì query đúng cái ref với id đó ra rồi gọi hàm
scrollIntoView

Đây mình có code demo cho thím thớt dùng object để lưu danh sách ref
https://codesandbox.io/s/react-scroll-to-element-wkgoe

Nhấp để mở rộng...

Em cảm ơn các thím nhé mà mấy nay bận quá em mới xem qua thôi chứ chưa nghiên cứu kĩ sâu vào các cách trên được giờ em quay lại đâm đầu vào đây , cảm ơn các thím nhiều