diff --git a/packages/charts/src/components/accessibility/partitions_data_table.tsx b/packages/charts/src/components/accessibility/partitions_data_table.tsx index 5f4c5d550d..73ebf9ae47 100644 --- a/packages/charts/src/components/accessibility/partitions_data_table.tsx +++ b/packages/charts/src/components/accessibility/partitions_data_table.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { createRef, memo, useState } from 'react'; +import React, { useRef, memo, useState } from 'react'; import { connect } from 'react-redux'; import { @@ -39,7 +39,7 @@ const ScreenReaderPartitionTableComponent = ({ debug, }: ScreenReaderPartitionTableProps) => { const [count, setCount] = useState(1); - const tableRowRef = createRef<HTMLTableRowElement>(); + const tableRowRef = useRef<HTMLTableRowElement>(null); const { tableCaption } = a11ySettings; const rowLimit = TABLE_PAGINATION * count; diff --git a/storybook/stories/interactions/16_cursor_update_action.story.tsx b/storybook/stories/interactions/16_cursor_update_action.story.tsx index f43d066d1d..66f3cbff51 100644 --- a/storybook/stories/interactions/16_cursor_update_action.story.tsx +++ b/storybook/stories/interactions/16_cursor_update_action.story.tsx @@ -52,8 +52,8 @@ const getSeriesKnob = (group?: string) => { }; export const Example = () => { - const ref1 = React.createRef<Chart>(); - const ref2 = React.createRef<Chart>(); + const ref1 = React.useRef<Chart>(null); + const ref2 = React.useRef<Chart>(null); const pointerUpdate = (event: PointerEvent) => { action('onPointerUpdate')(event); if (ref1.current) { diff --git a/storybook/stories/interactions/17_png_export.story.tsx b/storybook/stories/interactions/17_png_export.story.tsx index a6a5d7c835..d862640f67 100644 --- a/storybook/stories/interactions/17_png_export.story.tsx +++ b/storybook/stories/interactions/17_png_export.story.tsx @@ -36,7 +36,7 @@ export const Example = () => { /** * The handler section of this story demonstrates the PNG export functionality */ - const chartRef: React.RefObject<Chart> = React.createRef(); + const chartRef = React.useRef<Chart>(null); const handler = () => { if (!chartRef.current) { return; diff --git a/storybook/stories/interactions/18_null_values.story.tsx b/storybook/stories/interactions/18_null_values.story.tsx index 27161a11b9..9269442e7d 100644 --- a/storybook/stories/interactions/18_null_values.story.tsx +++ b/storybook/stories/interactions/18_null_values.story.tsx @@ -50,8 +50,8 @@ const getSeriesKnob = (group?: string) => { }; export const Example = () => { - const ref1 = React.createRef<Chart>(); - const ref2 = React.createRef<Chart>(); + const ref1 = React.useRef<Chart>(null); + const ref2 = React.useRef<Chart>(null); const pointerUpdate = (event: PointerEvent) => { action('onPointerUpdate')(event); if (ref1.current) {