Filtered table in React.js

Question

I am doing a filtered table in react, and I came up with the following code:

import React from 'react';
import { render } from 'react-dom';
import RowFilter from './RowFilter';
import List from './List';
import movieList from './movielist.json';

const data = movieList;
const App = () => (
  <RowFilter data={data}>
    <List/>
  </RowFilter>
);

render(<App />, document.getElementById('root'));

The implementation details are not that important since this is only a rough example, but the general idea is the following:

List normally expects a data array property so that it knows what to render

RowFilter has an input element and keeps track of a list of data. When the value changes, it updates the list of data.

RowFilter also sets the data property for it's child, whatever that child is

The result code works as expected, but I'm wondering about whether this is hard to read or considered a bad practice in general.

Running example

Simon Baumgardt-Wellander · Accepted Answer · 2018-02-02 18:02:54Z

2

I agree with what Dan Bovey says, and I would go one step further to make it more explicit and make RowFilter take a render prop:

<RowFilter
  data={data}
  render={(filteredData) => <List data={filteredData}/>}
/>

With this you can see exactly what is getting passed to your List, and you can use this RowFilter to wrap other components too.

answered Feb 2, 2018 at 18:02

Simon Baumgardt-Wellander

2361 silver badge3 bronze badges

\$\begingroup\$ I really feel I should change my accepted answer now but I don't know what's the proper Stack Etiquette on this... \$\endgroup\$

Loupax
– Loupax

2018-02-07 07:45:01 +00:00
Commented Feb 7, 2018 at 7:45
\$\begingroup\$ I'm not really sure either. meta.stackexchange.com/questions/93969/… \$\endgroup\$

Simon Baumgardt-Wellander
– Simon Baumgardt-Wellander

2018-02-08 00:27:06 +00:00
Commented Feb 8, 2018 at 0:27

Add a comment |

Dan Bovey · Accepted Answer · 2018-01-25 13:07:39Z

2

Yeah it's hard to read and only by looking at the source for RowFilter can you understand that it's injecting props into the child component that is given to it. Instead of passing it in as a child, you should pass it in a component prop.

<RowFilter data={data} component={List} />

Then in RowFilter.js, the render simply looks like this. Note the component prop gets renamed to uppercase.

<Component data={this.state.filteredData} />

Here's an updated example on codesandbox

answered Jan 25, 2018 at 13:07

Dan Bovey

413 bronze badges

Add a comment |

Stack Exchange Network

Filtered table in React.js

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Filtered table in React.js

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions