reactjs - react higher order component with filter function

Question

I am trying to create a sample functional HOC following the docs but I am unable to execute it. It is a function to filter out a single tour but it turns out to be an empty array. The data is retrieved and then passed from the App level to each pages. Data is successfully got back through redux action from the server. I can log all out but the singleTour in props is []. Does anyone know how to do it with HOC correctly? Sorry for making it too long.

WithFilter.js

import React from 'react';

const WithFilter = WrappedComponent => (props) => {
    const { tours } = props;

    const findSingletour = (tourId) => {
        let filtered = [];

        if (tours && tourId) {
            tours.find((tour) => {
                return tour._id === tourId
            })
        }
        return filtered;
    };
    
   // take the id from the params as the filter argument
    const tourId = props.match.params._id;
    let FilteredTour = findSingletour(tourId);

    return (
        <WrappedComponent singleTour={FilteredTour} />
    )
};

export default WithFilter;

Tour.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default function Tour(props) {
 const {singleTour} = props; // singleTour = [] -> HOC not working well

const {name, description} = singleTour;
   
return (
   <div>{name}</div>
)
}

App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavBar from './components/NavBar/NavBar';
import Home from './pages/Home/Home';
import Tour from './pages/Tour/Tour';
import WithFilter from './components/WithFilter/WithFilter';
import { connect } from 'react-redux';
import { GetTourDataAction } from './redux/Tour/Tour.actions';

const TourWithFiltered = WithFilter(Tour);

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      tours: [],
    }
  }

  async componentDidMount() {
    await this.props.getTourData();
    this.setState({
      loading: false,
      tours: this.state.tour,
    })
  }

  render() {
    const { tours } = this.props;
    const toursDataArray = tours.tourState.data;
    const { loading } = this.state;

    return (
      <Router>
        <NavBar />
          <Route render={({ location }) => (
                <Switch location={location}>
                  <Route exact path="/" render={props => <Home {...props} />} />
                  // pass an array to HOC to filter out a single tour with tourId
                  <Route exact path="/tours/:_id" render={props => <TourWithFiltered tours= 
                     {toursDataArray} isLoading={loading} />} />
                  <Route component={Error} />
                </Switch>
      </Router>
    );
  }
}

const mapStateToProps = (state) => ({
  tours: state.tourContainer,
});

const mapDispatchToProps = (dispatch) => {
  return {
    getTourData: () => {
      dispatch(GetTourDataAction());
    },
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

question from:https://stackoverflow.com/questions/65641340/react-higher-order-component-with-filter-function

Answer 1

Waitting for answers