How do selectively disable, or hide a button in a Repeater?

[thomaskennedy]

I have a couple of text fields and a button ("Edit") in a Repeater, iterating over some data like so:

{
  "id":1,
  "size":"",
  "shape":""
}

And a client state variable @ID. So when I click on the Edit button for row 3 it's simple enough to determine that the user wants to edit row 3:

function handler({api, event, helpers, imports}) {
    api.setState("id", event.context.item.value.id); // 3
}

So the "disabled" expression on the Size field is:

function evaluateProperty({api, helpers}) {
	return api.item.value.id != api.state.id;
}

So when the user clicks on the Edit button for row 3, the Size and Shape fields for row 3 are editable, and for every other row these fields are disabled.

But I do not see how to do the same for the Edit button itself. How do I selectively disable the edit button for row 3 when @ID is 3? Is there a better way to do this than with a button?

[IronPotato · Accepted solution]

Hi @thomaskennedy ,

not sure whether I understood it correctly, but buttons also have disabled property where you can specify logic. You have access to api.item data if the button is inside of component that is rendered by repeater.

[thomaskennedy]

Thank you! I knew that, and forgot it, and now I've learned it all over again.