-2

I have the following two buttons which I hope to merge into one.

    <div className="mt-8 mb-16">
      <button
        onClick={handlePurchase}
        type="button"
        // disabled='{this[id] <= 10}'
        className="inline-flex items-center px-16 py-3 border border-transparent text-base font-large elevation-15 rounded-md text-white bg-green-600
           hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
      >
        Mint me a Marköbot!
      </button>
    </div>

    <div className="mt-8 mb-16">
      <button
        type="button"
        disabled='{this[id] <= 10}'
        className="inline-flex items-center px-16 py-3 border border-transparent text-base font-large elevation-15 rounded-md text-gray-500 bg-gray-300"
      >
        All Marköbot have been minted!
      </button>
    </div>

The condition is this.id <=10. Using ReactJS and TailWind.

It's a alternative approach I am taking to solve the issue posted at Conditional disabling of button

Thanks lots for advice/help!

Markelous

Mark Tan
  • 21
  • 1
  • 6
  • What have you tried and what isn't working as expected? – David Jul 21 '21 at 15:01
  • *"I've tried using ternary inline"* - Where in the code shown have you tried that? *"it returns an undefined error"* - What is the exact error and what exact code produces that error? Currently this question reads like: "I tried something and it didn't work, please do it for me." That is not what we do here. Instead, if you can provide specific information about the specific problem you've encountered then we can help you understand and resolve that problem. To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. – David Jul 21 '21 at 15:37
  • 1
    There's no ternary operator in that answer, nor is it clear how that answer is related to your question. Though at a glance one thing that is clear is that the code in that answer passes an expression to the `disabled` property whereas your code passes a *string* to the `disabled` property. If the property is expecting a boolean then that string will either produce an error or quietly be interpreted as `true` because it's a non-empty string. Perhaps whatever you're trying to ask about is simply the result of a typo and you didn't intent to surround that expression in quotes? – David Jul 21 '21 at 16:13
  • The ternary is this disabled={this.id <= 6 ? false : true} but since the condition will return a boolean, the final set of codes does not have it. I tried surrounding it with quotes and without. When it does compile, the button is either disabled or not disabled (ie condition does not apply). The condition takes the ID dynamically from the smart contract. So, I thought of setting the condition one-level above the button, but I am having problem coding the JSX to render the if ... then condition. I am checking other solutions. It wld help if you can point me in the right direction. – Mark Tan Jul 21 '21 at 16:27
  • *"disabled={this.id <= 6 ? false : true}"* - That's not present in the code shown. *"the final set of codes does not have it"* - So is that the code you're asking about or not? You're showing some code, but asking about some other code that you're not showing? Please clarify. *"I thought of setting the condition one-level above the button"* - And have you tried that? Did you encounter a problem? *"I am having problem coding the JSX"* - If that's what you're asking about then show the code you're using and describe the problem you're observing. Overall this question just isn't clear. – David Jul 21 '21 at 16:31

1 Answers1

0

Instead of merging the two buttons, the same could be performed using JSX callback. See solution on the other posting at Conditional disabling of button

The undefined return came from the callback. It needs to be bound before (in this case) passing to the button.

See some of the other approaches suggested: How to use ternary operator in the render method in reactjs?

Mark Tan
  • 21
  • 1
  • 6