Here an example...

`App.js`

```
<Wrapper>
        <p ref={React.createRef()}>{state.result2}</p>
        <p>{state.result2}</p>
        <p>{state.result3}</p>
        <p>{state.result4}</p>
</Wrapper>

```

**`Wrapper.js`**

```
{props.children.map((child, idx) => (
        <ChildItem
          key={idx}
          {...props}
          child={child}
        ></ChildItem>
))}

 {props.children}

```

And be able to do some logic in **`ChildItem.js`** using the **element ref** without passing it in every element from `App.js`.

EX, I want to change the background of any element after some logic check
So, I can change `props.child.ref.current.style.background = '#fff';`

**NOTE: I don't want to add any ref from `App.js`**

**If there is any way to manipulate the props.children or clone and then add ref this solution is Ok for me**

Any hint?