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

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

Welcome to Stack Overflow! *"Codesandbox: [link]"* The way SO works, your whole question (including any necessary code) has to be **in** your question, not just linked. Three reasons: People shouldn't have to go off-site to help you; some sites are blocked for some users; and links rot, making the question and its answers useless to people in the future. Please put a [mcve] **in** the question. More: [*How do I ask a good question?*](/help/how-to-ask) and [*Something in my web site or project doesn't work. Can I just paste a link to it?*](https://meta.stackoverflow.com/questions/254428/) — T.J. Crowder, Mar 29 '21 at 13:39
In addition to the resources linked by @T.J.Crowder, you might also want to have a look at the ["*How do I create a React Stack Snippet with JSX support?*" mini-guide](https://meta.stackoverflow.com/a/338538/14201528) — secan, Mar 29 '21 at 13:46
Thank you for the help guys. I'll check out the resources you linked. I think the code snippet in the OP can be considered a reprex, I only added the codesandbox if anyone wanted to play around with the code themselves. That react strack snippet trick seems very useful! — Lursmani, Mar 29 '21 at 14:42

T.J. Crowder · Accepted Answer · 2021-03-29T14:31:12.053

4

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.

edited Mar 29 '21 at 14:31

answered Mar 29 '21 at 13:42

T.J. Crowder

1,031,962
187
1,923
1,875

1

Thanks for the idea! I'll try it out and report back. – Lursmani Mar 29 '21 at 16:09
1

This worked indeed, though after some fidgeting I realized that my approach was unnecessarily convoluted and scrapped the project. I decided to build a new carousel using a different approach. Thanks for the help! – Lursmani Mar 30 '21 at 08:35

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

1 Answers1