Question 50708 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to Set a Attributes based on Condition – Javascript

I am trying to set a attributes based on certain condition. attributes do certain action with there name

<Button
  onClick={() =>
    updateSegmentDetailsHandler(data.title, data.description)
  }
  isLoadingIndicator={btnLoading}
  disabled={!data.title || !data.description || btnLoading}
  btnColor={'primary'}
  data-bs-dismiss='modal' // how to set this attributes based on condition 
  className="btn text-white"
>
  Save changes
</Button>

<Button
  onClick={() =>
    updateSegmentDetailsHandler(data.title, data.description)
  }
  isLoadingIndicator={btnLoading}
  disabled={!data.title || !data.description || btnLoading}
  btnColor={'primary'}
  {btnLoading && ...[data-bs-dismiss='modal']} 
  className="btn text-white"
>
  Save changes
</Button>

I did something like this but it didn’t work

Tags:

3

Answers


  1. 0

    you can add the condition like js only
    data-bs-dismiss={btnLoading ? "modal" : null}
    If the btnLoading is true then data-bs-dismiss attribute will get modal value otherwise it will have null as value

    <Button
              onClick={() =>
                updateSegmentDetailsHandler(data.title, data.description)
              }
              isLoadingIndicator={btnLoading}
              disabled={!data.title || !data.description || btnLoading}
              btnColor={'primary'}
              data-bs-dismiss={btnLoading ? "modal" : null}
              className="btn text-white"
            >
              Save changes
            </Button>
    Login or Signup to reply.
  2. 0

    Maybe change your code like this solve your problem.

    data-bs-dismiss={btnLoading ? 'modal' : ''}
    Login or Signup to reply.
  3. 0

    You’re very close with the idea of spreading the the prop into the Component

    <Button
  onClick={() =>
    updateSegmentDetailsHandler(data.title, data.description)
  }
  isLoadingIndicator={btnLoading}
  disabled={!data.title || !data.description || btnLoading}
  btnColor={'primary'}
  {...(!btnLoading && {"data-bs-dismiss": 'modal'})}
  className="btn text-white"
>
  Save changes
</Button>

    instead of:

    {btnLoading && ...[data-bs-dismiss='modal']}

    try:

    {...(btnLoading && {"data-bs-dismiss": 'modal'})}

    This will optionally create the object which will then be spread in. When the condition is not met, React will find undefined and the prop will not be added

    I believe for custom attributes like data-bs-dismiss (rather than something standard like class is, which in React is className) the attribute should be written "as is" instead of with camalCase (e.g. style={{ paddingTop: "10px" }}); but I must admit I’ve not tried to use non-standard attributes attributes…

    EDIT:

    I tested this for both my custom Button component and the raw button element and both worked fine…
    Custom class being added

    This implies a deeper problem with either title or description being empty strings or the value of btnLoading never being false. I’d recommend some console.logs and uses of typeof…
    e.g. console.log("btnLoading", btnLoading, typeof btnLoading);

    On a second look, it also occurred to me that the line should be:

    {...(!btnLoading && {"data-bs-dismiss": 'modal'})}

    meaning that when the button is not loading, the custom prop should be added.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search