Is there any possibilities to passing prop from parent to children prop?

Question

I implementing a custom component that he receive how prop one children, the problem is that I need to passing a props to this children prop. How can I do that ?

this is my custom component:

import React from 'react'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList } from 'react-window'

function VirtualizedCarousel({
  height,
  itemSize,
  length,
  children,
  className,
}) {
  return (
    <AutoSizer>
      {({ _, width }) => (
        <FixedSizeList
          height={height}
          itemCount={length}
          itemSize={itemSize}
          width={width}
          layout="horizontal"
        >
          {({ index, style }) => (
            <div className={className} style={style}>
               {children}
            </div>
          )}
        </FixedSizeList>
      )}
    </AutoSizer>
  )
}

export default VirtualizedCarousel

I need to passing 'index' to children prop and using index in my children component.

should be like this :

    <VirtualizedCarousel>
        <CourseCard
           data={data}
           index={index}
        />
    </VirtualizedCarousel >

Does this answer your question? [How to pass props to {this.props.children}](https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children) — DBS, Mar 30 '23 at 09:53

score 0 · Answer 1 · answered Mar 30 '23 at 10:01

import React from 'react'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList } from 'react-window'

function VirtualizedCarousel({
  height,
  itemSize,
  length,
  children,
  className,
}) {
  return (
    <AutoSizer>
      {({ _, width }) => (
        <FixedSizeList
          height={height}
          itemCount={length}
          itemSize={itemSize}
          width={width}
          layout="horizontal"
        >
          {({ index, style }) => (
            <div className={className} style={style}>
               {React.cloneElement(children, { index })}
            </div>
          )}
        </FixedSizeList>
      )}
    </AutoSizer>
  )
}

export default VirtualizedCarousel

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Apr 04 '23 at 10:15

Is there any possibilities to passing prop from parent to children prop?

1 Answers1