export const functionName props undefined when using redux

Question

I am trying to understand how to get the props to show up when exporting a functional component like this

export const functionName = ({...props}) => {
  console.log(props); // undefined
  return <p>Hello</p>
}

functionaName.propTypes = { // propTypes here }
const mapStateToProps = state => ({ // state stuff here })
const mapDispatchToProps = { // props mapping here }
export default connect(mapStateToProps, mapDispatchToProps)(functionName); // works like it should

The normal method works as it should

functionaName.propTypes = { // propTypes here }
const mapStateToProps = state => ({ // state stuff here })
const mapDispatchToProps = { // props mapping here }
export default connect(mapStateToProps, mapDispatchToProps)(functionName);

I am trying to organize my imports and have a folder structure like so

components
  item // contains the component
    index.jsx
  index.js


  index.js
  export * from './item';

Then doing an import would be like this

import { functionName } from '../components';

My actual code does have a return value, I just truncated it for this post. Any ideas on how to accomplish what I am looking to achieve?

Answer 1

For this code to work:

import { functionName } from '../components';

You need your components/index.js too look like this:

import { someFunction } from './item';
export someFunction;

// Or one liner:
export { someFunction } from './item';

Here are some examples from one of my projects:

export { default as AutoSuggest } from './AutoSuggest/AutoSuggest.react';
export { ErrorLog } from './ErrorLog/ErrorLog.react';
export { default as IconsBar } from './IconsBar/IconsBar.react';
export { JobDetails, JobEntry, JobGraph } from './Job';
export { default as LogsViewer } from './LogsViewer/LogsViewer.react';
export { default as Menu } from './Menu/Menu.react';
export { default as MultiSelect } from './MultiSelect/MultiSelect.react';
export { default as Notifications } from './Notifications/Notifications.react';
export { default as Panel } from './Panel/Panel.react';
export { ColorProperty } from './Theme';