How to pass comp A variable to prop.children which in turn are the result of an array.map within the comp A

Question

An example will explain better then I can ever formulate it

In below code, how to pass the index to Child when Child is passed in as a prop

const ComponentA = (props) => {
  return (
    <div>
      { data.map((item,index) => {
          return (
            <Child index={index} />
          );
        })
      }
    </div>
  )
}

So my component A would look like this, and I want to pass the index to (each of) the children

const ComponentA = (props) => {
  return (
    <div>
      { data.map((item,index) => {
          return (
            {props.children}
          );
        })
      }
    </div>
  )
}

thanks

What? They're *both* component a. Give a less abstract example. — jonrsharpe, Apr 19 '20 at 18:54
You could use React.cloneElement to pass aditionally props to the child component. See https://reactjs.org/docs/react-api.html#cloneelement — Stephan Olsen, Apr 19 '20 at 19:05

score 0 · Answer 1 · answered Apr 19 '20 at 19:09

0

Use React.cloneElement:

return <div>{React.cloneElement(props.children, { index: index })}<\div>

https://reactjs.org/docs/react-api.html#cloneelement

How to pass props to {this.props.children}

answered Apr 19 '20 at 19:09

Cameron Russell

58
1
6

How to pass comp A variable to prop.children which in turn are the result of an array.map within the comp A

1 Answers1