topic Re: PowerBI with React Functional Components in Developer

PowerBI with React Functional Components

jbrundagejr — Thu, 27 Jan 2022 15:04:13 GMT

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.

Re: PowerBI with React Functional Components

v-yalanwu-msft — Mon, 31 Jan 2022 07:54:42 GMT

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-typescript

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.

Re: PowerBI with React Functional Components

jbrundagejr — Tue, 01 Feb 2022 15:44:29 GMT

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!!

Re: PowerBI with React Functional Components

eagragh — Mon, 05 Jun 2023 04:57:44 GMT

@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