react: How to structure components - reactjs

Question

I am taking up react, and need some advice on how to structure my component tree.
I want to build a generic List with filters associated with it
I have:
List component: displays a list of item. Props:
Children: prop(a function) used to render each item of the list
(item) =>
<li className="list-group-item" key={item.id}>
{item.name}
</li>
list: array of object
Filter Component: bunch of input/select used to filter the list
filterList: array containing all the field names
onChange: function to call when field changes
stateValues: values of the fields (state in the above component)
ListAndFilterContainer: contains the state the filters and passes it to the list
list: list of items passed to the list component
children: function passed on to the list as children to display the items
filterList: list of fields passed to the filter component
Render of the ListAndFilterContainer:
`<div>
<FilterOnList
filterList={this.props.filterList}
filterState={this.state.filter}
onChange={this.handleFilterChange} />
<ListComponent
list={this.props.list}
title={this.props.title}
>
{this.props.children}
</ListComponent>
</div>`
Now to make it generic I want to be able to modify the markup on how the list is gonna be rendered, and how the input fields of the Filter component are gonna be rendered.
I want to be able to use the logic of a filtered list but I still want to be free on the presentation.
How could I structure it ? The easiest way I guess would be to inherit the List component and alter the render ? For example creating a CarList extends List ?
Same for the Filter component ?
Thanks

Answer 1

A few thoughts...
Good idea to use a container component to hold the state. This a pattern that works well for React.
It sounds like the ListComponent could just have different types of children and might not need specific handling for different list types. In other words, you might have an array of CarItem components and render it as a children of ListComponent, instead of making a separate CarListComponent. It depends on whether you really need different logic for rendering the different lists. Some visual differences, e.g. smaller row heights, can just be accomplished with CSS, so if you pass in a className prop and render it like <ul className={this.props.className}> that can handle a lot of customization.
If you do find you need separate classes for different types of list components (or items, etc) I would avoid use of "extends", mixins, and inheritance in general. This is controversial, perhaps, but IMO, Javascript on its own is too loosely typed to work with inheritance. You lose track of what is happening when things get a little complicated, e.g. "Which class did I get that function from?" If you want to use inheritance, consider typescript. Otherwise, I'd go with functional composition - just import the functions you need from modules.