1

I made two button component and when i click one i would like to render the other onClick to be able to disable (since they don't look the same).

    const match = id;
    const checkId = this.state.pokemon.includes(match);

            {!checkId || this.state.isDisabled === true ? (
                        <button
                            onClick={() =>
                                this.setState({
                                    isDisabled: true
                                })
                            }
                        >
                            Get Pokemon
                        </button>
                    ) : (
                        <Button disabled/>
                    )}
                </div>

The problem is that the button disable is only rendering when i refresh because is meeting the conditions of check Id but i have trouble Switching to the disable button directly after the click

Yannis
  • 21
  • 1
  • 6
  • Is it `button` or `Button`? Also, yes, you should move a single button where the condition determines its `disabled` value. Edit: sandbox: https://codesandbox.io/s/naughty-kowalevski-1iqis –  Oct 25 '19 at 06:57
  • Thank you, It's working but disabling all the button (i'm mapping) any way to deactivate only one ?? – Yannis Oct 25 '19 at 07:20
  • Sure, but you need a separate `state` variable for each button obviously, i.e. an array. –  Oct 25 '19 at 07:47

2 Answers2

1

Replace to

     <button disabled={!checkId || this.state.isDisabled}
                        onClick={() =>
                            this.setState({
                                isDisabled: true
                            })
                        }
                    />
                        Get Pokemon
       </button>
Oleg
  • 3,580
  • 1
  • 7
  • 12
0

The following condition seems faulty:

{!checkId || this.state.isDisabled === true ? (

In my opinion the condition should be changed to:

!checkId || !this.state.isDisabled, because from what I see, whenever the button is clicked the isDisabled state is set to true which evaluates the condition to truthy, hence, the falsy case is never executed.

If you need to execute it once, per match, you can even change the condition to be:

(!checkId && !this.state.isDisabled)

Hope this helps

Aseem Upadhyay
  • 4,279
  • 3
  • 16
  • 36