React Redux render connected component

Question

I'm using the connect function React Redux to connect my store to a React component. After it is connected I want to render the component. This works:

class Init extends React.Component {
  render() {
    return (
      <View /> // Is really more elaborate
    )
  }
}

Connect it to the store:

const InitPage = connect(
  state => ({
  }),
  dispatch => ({
  })
)(Init)

Now render it:

class App extends React.Component {
  render() {
    const content = <InitPage />

    return (
      {content}
    )
  }
}

Great. This all works. However...

When I place the connect inside a function and return the connect, as in:

const getInitPage = () => {
  const InitPage = connect(
    state => ({
    }),
    dispatch => ({
    })
  )(Init)

  return InitPage
}

If I now try to render the component:

class App extends React.Component {
  render() {
    const content = getInitPage()

    return (
      {content}
    )
  }
}

I get an error:

Invariant Violation: React.Children.only expected to receive a single React element child.

What is the correct way to return a Redux "connected" component from a function?

Shubham Khatri · Accepted Answer · 2017-12-15 05:57:24Z

1

In case you are returning the component from the function, you need to render it like

class App extends React.Component {
  render() {
    const Content = getInitPage()

    return (
      <Content/>
    )
  }
}

Also make sure the componentName starts with a uppercase character.

answered Dec 15, 2017 at 5:57

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Collectives™ on Stack Overflow

React Redux render connected component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related