Pass a custom element's object prop from React without losing it

React hands my custom element an array, and the browser shows it back as the literal text object Object instead of the real data.

IntermediateRead 7 minDoing: an hour7 steps

▶ Start

What you'll have at the end

A small typed wrapper component that sets a custom element's array or object prop as a real DOM property through a ref, confirmed to survive the element's class registering after the component's first render.

Before you start

You need

A custom element already registered somewhere in your app, your own class or one from a package, with a getter and setter for at least one array or object property, plus a React component that currently renders that tag in JSX and hands it that value as a prop.

Not covered

Recovering a value a caller set directly on the element's own instance before its class finished loading: that fix belongs on the element's own side, and this recipe only covers how a React component hands the element its prop.

Leans on

7 steps

Where to go next

A property set too early silently vanishes

for the matching fix on the element's own side, when a value lands on the instance directly before its class has finished loading

Checked 25 Aug 2026

Part of the Web Components cookbook