How can I create an array of indexes of props.children elements of a component in React

Question

I'm trying to build a carousel app where you can put the carousel items as children of the carousel component.

   return (
    <div className="carousel-container" style={{width: containerWidth}}>
    <button className="button-left" >L</button>
    <button className="button-right" >R</button>
    <div className="carousel-slider" style={{
        display: "flex",
        flexDirection: "row",
         flexWrap: "none",
      overflow: "scroll",
     alignItems: "center",
    height: props.height, 
    width: "100%", 
    }}>
        {props.children}
    </div>
    </div>
)

I want to be able to scroll this carousel to the selected child. The way I figure I should do it is by having the button-left and button-right elements scroll to the index of the next/previous child. However, I have no way of getting the indexes of children to tell the app to scroll to a certain child.

Does anyone know a way for me to get the indexes of the props.children of "carousel-slider", put them in an array, then scroll to the respective child on the press of the left/right buttons? The children are HTML emenets, like divs or imges.

Codesandbox: https://codesandbox.io/s/hardcore-goodall-usspz?file=/src/App.js

PS I know there are really cool carousel addons out there. I'm doing this to get better at React.

Answer 1

You can use React.Children.toArray to turn the children prop into an array of children. From the docs:

Returns the children opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down.

Once you have an array, you can use indexing into the array.