S
S
shema12020-06-17 14:15:41
React Native
shema1, 2020-06-17 14:15:41

HOC Higher-Order Components how to pass parameters?

here is my App component

import React, { Component } from "react";
import City from "./City";
import withDataLoader from "./withDataLoader";

const App = () => {
  const MyCity = withDataLoader(
     City,
    "https://5e5cf5eb97d2ea0014796f01.mockapi.io/api/v1/cities/1"
   );

  return (
    <div className="page">
      <MyCity />
    </div>
  );
};
export default App;


here is my Higher-Order Components
import React from "react";
import Spinner from "./Spiner";

const withDataLoader = (url, Component) => {
   class Container extends React.Component {

    state = "";

    componentDidMount() {
      this.get();
    }

    get = () => {
      fetch(url)
        .then((response) => response.json())
        .then((data) => this.setState(data));
    };

    render() {
      return this.state === "" ? <Spinner /> : <Component data={this.state} />;
    }
  };
  return Container
};

export default withDataLoader;


i pass parameters to the HOC like this,
withDataLoader(url, City)
but in the documentation I also saw such an entry
withDataLoader(url)(City) https://ru.reactjs.org/docs/higher-order-component...
city)?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question