title: Can we design a system in react where all the filters and grids can be stored in one file to use as props to pages?
body: <p>This same code is written for multiple pages with some changes and redux is implemented for state management. Please guide me I want to write simple and easy code.</p>
  <pre><code>class Grid extends Component {
      constructor(props) {
          super();
          this.loadMoreRef = React.createRef();
          this.state = {
              loaded: true
          };
      }
  
      componentDidMount() {
          let p1 = new Promise((resolve, reject) =&gt; {
              let { search_payload } = this.props;
              let payload = { ...search_payload };
              payload.statusId = this.props.statusId;
              this.props.unitSearchAction({
                  type: &quot;UNIT_SEARCH&quot;,
                  value: payload
              });
              resolve(&quot;&quot;);
          });
  
      loadMore() {
          let unit_store = this.props.store || [];
          let obj = unit_store[unit_store.length - 1];
          let { search_payload } = this.props;
          let payload = { ...search_payload };
          if (payload.sortBy) {
              if (payload.sortBy === &quot;id&quot;) {
                  payload.lastKey = obj[payload.sortBy];
              } else {
                  payload.lastKey = obj[payload.sortBy + 'Srt'];
              }
  </code></pre>
  <p><strong>The redux part is implemented differently for every component which has increased the code length so much.</strong></p>