This product is not supported for your selected
Datadog site. (
).
このページは日本語には対応しておりません。随時翻訳に取り組んでいます。
翻訳に関してご質問やご意見ございましたら、
お気軽にご連絡ください。
The React renderer enables users to create fully custom UI components using the language and libraries they already know. This component gives builders access to React APIs so they can create flexible, dynamic, and visually impactful apps in App Builder.
This page provides an example of how to use the React renderer component. For a full reference to all of the fields in the React renderer, see Components.
Example component definition
const App = (props) => {
// Local component state
const [localState, setLocalState] = React.useState(0);
// Access shared state from props
const { count = 0 } = props.state;
const incrementShared = () => {
// Update shared state that persists outside component
props.setComponentState({...props.state, count: count + 1});
};
return (
<div>
<h3>Shared Count: {count}</h3>
<button onClick={incrementShared}>Increment Shared</button>
</div>
);
}
return App;
${{
queryData: query0.outputs,
name: global?.user?.name,
state: self.state,
}}
Example initial component state
${{
count: 0,
items: [],
isLoading: false,
selectedId: null,
}}
Further reading
