Skip to main content
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Regular Visitor

PowerBI with React Functional Components



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) = options.element;
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.


Regular Visitor

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: 

  dataArr: dataObjectArray,
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!!

@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.



Community Support
Community Support

Helpful resources

Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City


Power BI Monthly Update - April 2024

Check out the April 2024 Power BI update to learn about new features.

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.