Passing an object to a custom Button component

Kylo

Say i have an user object and need to pass it into a custom component which extends Button component:

CustomButton.component({user});

// trying to show both avatar & username in a button
export default class CustomButton extends Button {
	getButtonContent() {
		const user = this.props.user;

		return [
		  avatar(user),
		  <span className="Button-label">{username(user)}</span>
		];
	}
}

It is working that way but <button user=[object object] /> attribute lies on the source code. What is the proper way of doing this?

clarkwinkelmann

Kylo but <button user=[object object] /> attribute lies on the source code

That's because the Button components injects all the unknown props as attributes on the button element https://github.com/flarum/core/blob/c5122bf5d57c07854a3c3cfce09e1547b65d6b68/js/src/common/components/Button.js#L52

In the source code for Button you can see how we deal with that in core. I realize extensions actually can't extend it properly. First a copy of the props is made into the attrs object. Then, when known props are read, they are deleted from that attrs object. Finally, the attr object with the remaining attributes is used as the button attributes. The extract() helper function reads a value and deletes it.

What we could do is pass attrs as a parameter to getButtonContent(), that way extensions could also call extract() on the attributes when they extend the button into their own class, or even via extend().

Kylo

I ended up extending Component instead of Button for CustomButton

--> I also could override the Button component's view() function in CustomButton

Kylo

clarkwinkelmann that could be really useful. I can't be the only one facing with this situation 🤷‍♂️