I'm using a library called SlidingPane, and each pane has the exact same styles, just different content depending on the page. So I want to put it into a separate page, and get the content through an argument:
export default function CustomSlidingPane(content){
<SlidingPane
className="slidingPanel"
isOpen={state.isPaneOpen}
onRequestClose={() => {
setState({ isPaneOpen: false });
}}
>
<Container>
{content}
</Container>
</SlidingPane>
}
All of the content is in separate .js pages that kind of look like this:
export default function One() {
return (
<h1>Hello</h1>
);
}
So what I'm trying to do is pass one of the content functions through to the CustomSlidingPane like this:
import One from './One';
import CustomSlidingPane from './CustomSlidingPane';
export default function Main(){
<Container>
<CustomSlidingPane content={<One/>}>
</Container>
}
Every thing I've tried always ends up in content being undefined. Is there any proper way to do this / is this even possible?
A few things:
return in CustomSlidingPanecontent from the propsTry this
export default function CustomSlidingPane({content}){
return (
<SlidingPane
className="slidingPanel"
isOpen={state.isPaneOpen}
onRequestClose={() => {
setState({ isPaneOpen: false });
}}
>
<Container>
{content}
</Container>
</SlidingPane>
)
}
Also, this pattern might be supported better with the children prop.
You will need to use children prop here. I am adding an example with a simple div element.
export default function CustomSlidingPane(props) {
return <div>{props.children}</div>;
}
Content will be same as you defined in your example:
export default function One() {
return <h1>Hello</h1>;
}
This is how you can pass the content to your slidingPlane component:
export default function Main() {
return (
<div>
<CustomSlidingPane>
<One />
</CustomSlidingPane>
</div>
);
}