searchkit - how to pass props into an itemComponent component

Question

I'm fairly new to React and I would really appreciate some help on this, as its been driving me nuts.

I am trying to figure out how I can pass props into searchkit's listComponent from the <ViewSwitcherHits/> component.

Parent Component:

<ViewSwitcherHits 
hitComponents={[
    {key:"query", title:"Query", listComponent:QueryDetailView, defaultOption:true}
]}
/>

So the QueryDetailView is a custom Component I created that requires props in order to show a detail view of a selected query. The user selects a query block from a dropdown in another Component, and that selected filter would then display in the QueryDetailView Component. There may be a better way to pass that selected query object from a child to the parent back down to the QueryDetailView child. I come from Angular so I know a service would be perfect for this, but not sure how to implement in React. Or if Searchkit even allows passing in props into an ItemComponent.

I hope this is enough information. If not, please let me know and I will add more code. Thanks!

You can pass child to a component like that: . You can access to this component in AwesomeComponent by using this.props.children. If you want add props to this.props.children, do something like that: {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })} — Alexandre Nicolas, Mar 29 '17 at 15:05
So AwesomeComponent acts as a wrapper to QueryDetailView? Could you show a more fleshed out example of the React.cloneElement? — mcastre, Mar 29 '17 at 16:00

score 1 · Answer 1 · answered Oct 06 '17 at 10:01

Try assigning the QueryDetailsView with your properties to a variable/constant and then use that as the listComponent. The searchkit properties and your properties will be merged, so inside the QueryDetailsView you will be able to access this.props.oneprop and this.props.anotherprop:

const qdv = (<QueryDetailView oneprop="somevalue" anotherprop="anothervalue" />);

<ViewSwitcherHits 
hitComponents={[
    {key:"query", title:"Query", listComponent:qdw, defaultOption:true}
]}
/>

searchkit - how to pass props into an itemComponent component

1 Answers1