PowerBI with React Functional Components

[jbrundagejr]

Hello:

Building my second custom PBI visual, this time with React. I am using functional components and at a complete loss when it comes to getting the data from the update method into App.tsx. App.update({data: dataArray}) throws this error: ```Property 'update' does not exist on type 'FunctionComponent<AppProps```

This is how I have my visual.ts setup:

import {App, initialState} from './App'

constructor(options: VisualConstructorOptions) {

  this.reactRoot = React.createElement(App)

  this.target = options.element;

  ReactDOM.render(this.reactRoot, this.target)

}

public update(options: VisualUpdateOptions) {

 **does a bunch of reformating off incoming data, spitting out `dataObjectArray`

 App.update({data: dataObjectArray})

}

In App.tsx: 

export interface AppProps {

  data: dataObject[]

}

export const initialState: AppProps = {

  data: []

}

export const App: React.FC<AppProps> = () => {

 useEffect( setData(data)) but formatted properly obviously

 }

It would be great if Microsoft could update the guide to functional components instead of class based... Any help would be very much appreciated!! Thank you in advance.

[jbrundagejr]

Thank you for the reply! I've changed it around so I no longer get the TS complaints, but I still don't understand by my update method in visual.ts isn't passing the props to App.tsx. At the end of the update method, I pass in my props and call it like so: 

App({

  dataArr: dataObjectArray,

  height,

  width

})

this.update(options)

}

And my App is setup like so: 

export const App: React.FC<AppProps> = (props) => {

  const { dataArr, width, height } = props;

}

A console log in my App of dataArr, width and height all return undefined which I don't understand. Any insight as to how to get my data talking to my App.tsx (a functional component) from the visual.ts file would be greatly appreciated!!

[eagragh]

@jbrundagejr would you be able to update react functional component custom visual.

Or any documentation you found for, how to update react functional component using power bi custom visual. As I am new to this and stuck. As not able to update react component.

Any help would be appreciated.

Thanks

[v-yalanwu-msft]

Hi, @jbrundagejr ;

You can check if these related post can is useful to you.

https://stackoverflow.com/questions/46310591/property-name-does-not-exist-on-type-appcomponent

https://stackoverflow.com/questions/64076143/property-does-not-exist-on-type-react-typescript

https://stackoverflow.com/questions/63859211/issues-with-props-in-a-function-component-with-typescri...

Best Regards,
Community Support Team_ Yalan Wu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.