renderer Property in Dialog Does Nothing in React

Flow
1

Hello,
I am trying to make a dialog, but for some reason, the renderer property is not working. When I render this, something pops up, but the dialogRenderer function does not run. Here is my react function:

import React from 'react'
import '@vaadin/vaadin-dialog' // vaadin-dialog

export default function Dialog(props){
	function dialogRenderer(root, dialog){
		console.log("ran")
		alert("ran")
		root.textContent = "This is some text"
	}


	return(
		<div>
			<p>dialogue time</p>
			<vaadin-dialog renderer={dialogRenderer} opened={true}></vaadin-dialog>
		</div>
	)
}
2

Hi,
Using Web Components in React is a bit tricky as property binding doesn’t necessarily work as you’d expect. Here’s some info on Web Components & React https://reactjs.org/docs/web-components.html

In this case, the value ends up as the element’s renderer attribute, not renderer property. In order to set it as a property, you’ll need to use ref to get a reference to the element and then set the renderer property to it https://reactjs.org/docs/refs-and-the-dom.html.

3

I see. It is strange though that other elements work as a React prop, such as opened and items on vaadin-grid.

4

Some properties might work because of attribute deserialization = you can set the grid’s items attribute as a JSON string representation of an array and Polymer will deserialize that as an actual array object and then assigns the result as the items property. Same thing with opened, though it’s a simpler case.