How to make a reusable component?

Question

React

Good afternoon. I have a Components folder which contains component folders. It contains the Sliders folder, which contains css styles and index.jsx slider code.

There is also a Pages folder in the project, which contains pages on one of which I call the Sliders component.

The slider content array is also located in Sliders.

How to make sure that the Sliders component is reusable and can be called on some other page, but with different data? Where in this case to store the data that should be displayed in the slider?

The problem is that the slider can be called on several pages at once and it will not work specifically to indicate that one or another array is used on one page.

Please tell me in which direction to at least look for information.

Answer 1

1. Receive data on each page in the page itself - pass as props to Sliders.
2. Make a VasyaSliders wrapper component that only receives Vasya's data and draws Sliders with them. Put it in the components folder next to the pages that use it.
¯\_(ツ)_/¯