CODEWITHSUNDEEP
javascriptreactjssearchkit
mcastre
mcastre

Reputation: 31

searchkit - how to pass props into an itemComponent component

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!

Upvotes: 1

Views: 653

Answers (1)

Olf
Olf

Reputation: 56

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}
]}
/>

Upvotes: 1

Related Questions