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.