How to pass props into an imported function component?

user_8453181 0
Viewed 133

This first component below works perfectly fine on its own but I want to have the component be imported from another file:

import * as React from 'react'

const mapStateToProps = 'something here'
const mapDispatchToProps = {
  dispatchSetSomething,
  dispatchSetSomething
}

type IProps = IContainer & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps

const component: React.FunctionComponent<IProps> = (props: IProps) => {

  const { base, title, info } = getStyles()
  return (
    <body>
     <div>
      Code here
     </div>
    </body>
  )
}

export const component2 = mconnect(mapStateToProps, mapDispatchToProps)(component)

I want to keep states in a separate folder and import the "component" like this:

import * as React from 'react'
import {component} from './otherFile'

const mapStateToProps = 'something here'
const mapDispatchToProps = {
  dispatchSetSomething,
  dispatchSetSomething
}

type IProps = IContainer & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps

const holdComponentValue = (props:IProps)=>{
    component(props);
}

Is the "holdComponentValue" correct? Component file:

const component: React.FunctionComponent<> = (props) => {

  const { base, title, info } = getStyles()
  return (
    <body>
     <div>
      Code here
     </div>
    </body>
  )
}

export default component

How can I get the syntax correct so that it works like the first file example? I am not sure what this is called. Separation of Concerns?

react-redux typescript reactjs
1 Answers

What you have to do export the connected component and use that like this:

import * as React from 'react'
import {component} from './otherFile'

const mapStateToProps = 'something here'
const mapDispatchToProps = {
  dispatchSetSomething,
  dispatchSetSomething
}

type IProps = IContainer & ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps

export const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(component)

and use it like a normal component in other places like this:

import {ConnectedComponent} from '/path-to-connectedComponent';
user_114321020
Related