Return multiple HOC components from Array in React JS

Question

I am trying to declare and return multiple HOC's from any array, but keep being returned a "Functions are not valid as a React child." Error. Has anyone ran into this issue before?

JS:

....

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const withRequestAnimationFrame = () => WrappedComponent => {
  class RequestAnimationFrame extends Component {
    state = {
      timeStamp: 0,
      newItem: "Test"
    };

    componentDidMount() {
      const min = 1;
      const max = 100;
      const rand = Math.floor(Math.random() * (max - min + 1)) + min;
      this.setState({ timeStamp: this.state.timeStamp + rand });
    }

    render() {
      return (
        <WrappedComponent {...this.state} {...this.props} />
      )
    }
  }
  return RequestAnimationFrame;
};

const App = ({ timeStamp, newItem }) => (
  <div style={styles}>
    <h1>{timeStamp}</h1>
    <p>{newItem}</p>
  </div>
);

const arrayItems = ["EnhancedApp", "EnhancedApp2"];
const Products = ({ items }) => {
  return (
    items.map((item, index)  => (
      item = withRequestAnimationFrame()(App)
    ))
  )
};

function Product() {
  return (
    <div>
      <Products items={arrayItems} />
    </div>
  )
}

render(<Product />, document.getElementById("root"));

Guts · Accepted Answer · 2019-11-12 22:27:58Z

1

This line is the problem:
```
item = withRequestAnimationFrame()(App)
```
What your doing there is assigning result of withRequestAnimationFrame()(App) function to item which is definetly not what you wanted. I assume you wanted to render there multiple instances of withRequestAnimationFrame component. You can do it like this:
```
items.map((item, index)  => (
    const NewComponent = withRequestAnimationFrame(item)(App);
    return <NewComponent key={index}/>
))
```

Second problem is that you are not passing item prop to the wrapped component. To pass item prop you should do:

const withRequestAnimationFrame = (item) => WrappedComponent => {
   class RequestAnimationFrame extends React.Component {
       state = {
           timeStamp: 0,
           newItem: item
       };

edited Nov 12, 2019 at 22:27

answered Nov 12, 2019 at 21:40

Guts

7684 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user992731 Over a year ago

No Dice! "const arrayItems = ["EnhancedApp", "EnhancedApp2"]; const Products = ({ items }) => { return items.map(item => { return withRequestAnimationFrame(item)(App) }) };"

user992731 Over a year ago

Yea, I just wanted a new instance. "newItem" was just a placeholder but good looking out. :)

Collectives™ on Stack Overflow

Return multiple HOC components from Array in React JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related