Is it possible to use the same component for different data in React?

Question

React

Hello, there are two identical pages. Appearance, styles, type data, everything is identical. The only difference is that there are different data. One is the "Promotions" page, the second is the "Did you know" page. At first I wanted to create a separate component. But then I thought that it is possible to use the same component for the second page, only make different requests depending on the slugthis.props.match.path

Ready component code

import React, { Component } from 'react';
import Breadcrumbs from '../../../helpers/breadcrumbs';
import StockSingle from './StockSingle';
import Preloader from '../../../helpers/preloader';
import $ from 'jquery';
import stocksPageMagnificPopupInit from './stocksPageMagnificPopupInit';


const NoStocksMessage = () =>  <p className="woocommerce-noreviews" style={{minHeight: 100}}>Акций пока нет.</p>;

class StockPage extends Component {
    componentDidMount(){
        const path = this.props.match.path;

        console.log( path );

        const {setAllStocks} = this.props;
        setAllStocks(path);

        this.$el = $('.offers__items');
        stocksPageMagnificPopupInit(this.$el);
    }

    render(){
        const {isStocksReady, isStocksLoading, stocksErrors, stocksList, stockAttachment} = this.props;

        const matchPath = this.props.match.path;
        
        return (
            <React.Fragment>
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12">
                            <Breadcrumbs />
                        </div>
                    </div>
                </div>
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12">
                            <div className="col__inner">
                                <div className="row">
                                    <div className="offers__items">
                                        {isStocksLoading && <Preloader />}
                                        {isStocksReady && (
                                            stocksList.length ? (
                                                stocksList.map(s => (
                                                    <StockSingle
                                                        stock={s}
                                                        attachments={stockAttachment[s.id]}
                                                        matchPath={matchPath}
                                                        key={s.id}
                                                    />
                                                ))
                                            ) : (
                                                <NoStocksMessage />
                                            )
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

export default StockPage;

for each component, create your own reducers, and in the action make a request depending on which slug came (dynamically).
What do you think? Is this option used in practice? How to do it right? Or duplicate component, reducer, action?
Thank you.

Answer 1

Composition and dependency inversion:

class SomePage extends React.Component {
  componentDidMound() {
    this.props.fetchSomeData();
  }

  handleSomeEvent = () => {
    doSomething();
  };

  render() {
    const { data } = this.props;

    return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
  }
}

class SomeOtherPage extends React.Component {
  componentDidMound() {
    this.props.fetchSomeOtherData();
  }

  handleSomeEvent = () => {
    doSomethingOther();
  };

  render() {
    const { data } = this.props;

    return <SomeCommonComponent data={data} onSomeEvent={this.handleSomeEvent} />;
  }
}