Failing to refactor a React render prop component into 2 components - reactjs

Question

I'm trying to refactor the following component so I can separate the outer / inner components.
// outer component
<Draggable>
{(provided) => (
<div
className={`${styles.listWrapper} ${scrollbarClassName}`}
ref={provided.innerRef}
{...provided.draggableProps}
>
// This is the inner component I'd like to extract:
<div className={`${styles.column} ${scrollbarClassName}`}>
// However I'm using the provided props here:
<div {...provided.dragHandleProps}>
<ColumnHeader {...columnHeaderProps} />
</div>
</div>
</div>
)}
</Draggable>
I'd like to be able to use it this way or similar, but I am not sure how to pass the props through children so I can use the provided prop in my inner component inside DraggableColumn:
const Draggable = <DraggableContainer>
{(provided) => (
<div
className={`${styles.listWrapper} ${scrollbarClassName}`}
ref={provided.innerRef}
{...provided.draggableProps}
>
// How to pass provided to children and then use it in DraggableColumn below
{props.children}
</div>
)}
</DraggableContainer>
const DraggableColumn = () => <DraggableContainer>
<div className={`${styles.column} ${scrollbarClassName}`}>
// How to get access to provided?
<div {...provided.dragHandleProps}>
<ColumnHeader {...columnHeaderProps} />
</div>
</div>
</DraggableContainer>

Answer 1

I think what you're looking for is something like the following:
const DraggableContainer = props => {
const provided = {
foo: "bar",
baz: () => console.log("hello world")
};
return props.children(provided);
};
const Draggable = props => {
return (
<DraggableContainer>
{provided => props.children(provided)}
</DraggableContainer>
);
};
const DraggableColumn = props => {
console.log('DraggableColumn.props', props)
return (
<div>
<h2>DraggableColumn</h2>
<p>provided: {JSON.stringify(props.provided)}</p>
</div>
);
};
const App = () => {
return (
<Draggable>{provided => <DraggableColumn provided={provided} />}</Draggable>
);
}
ReactDOM.render(
<App />,
document.getElementById("app")
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Basically, what you're doing here is recreating the same functionality that DraggableContainer provides by utilizing the children prop pattern:
reactjs.org/docs/render-props.html#using-props-other-than-render
One caveat is that Draggable will always be expecting props.children to be a function, meaning that the following will work:
<Draggable>
{(provided) => {
return <DraggableColumn provided={provided} />;
}}
</Draggable>
But this will not because props.children is not a function, unlike the example above:
<Draggable>
<p>Hello World</p>
</Draggable>
Hope this helps.

Answer 2

To pass a prop you need to declare it inside of the <>
For example
<Draggable provided={this.state.provided}>
<div>
Some Stuff
</div>
</Draggable>
Then you can do this.props.provided inside the draggable component.