Experience Builder mapExtraStateProps usecase

[BhaveshSuthar]

Hello everyone in the community!

So I am creating a custom widget using functional component and I need to use the mapExtraStateProps function in my component, I know that in class component I just need to define the function and is internally invoked. But how does this work in functional component?

Thanks for your help in advance.

[BhaveshSuthar]

I found in the documentation that we can use useSelect similar to useSelector in Redux. How to import useSelect?

[QunSun]

Hi @BhaveshSuthar , you just need to set Widget.mapExtraStateProps = function(state, props) {}. This is equivalent to class component.

Here is the code snippet.

/** @jsx jsx */
import { React, type AllWidgetProps, type IMState } from 'jimu-core'
import { type IMConfig } from '../config'

export interface ExtraCustomWidgetProps {
  ...
}

export interface WidgetProps extends AllWidgetProps<IMConfig>, ExtraCustomWidgetProps {
  ...
}

const Widget = (props: WidgetProps): React.ReactElement => {
  return (
    ...
  )
}

// define mapExtraStateProps for functional widget
Widget.mapExtraStateProps = (state: IMState, props: AllWidgetProps<IMConfig>): ExtraCustomWidgetProps => {
  return {
    ...
  }
}

export default Widget