Question 73432 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to make conditional props in Bootstrap Button Group in ReactJS

I have useState as below:

 const [orderStandard, setOrderStandard] = useState("total");

And according to the value of orderStandard, I want to give props.

This below code is ButtonGroup of BootStrap with ReactJS.

https://react-bootstrap.github.io/components/button-group/#button-toolbar-props

   <ButtonGroup
            style={{
              height: 35,
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Button
              id="order-button"
              variant="light"
              style={{ width: 80 }}
              active
              onClick={() => setOrderStandard("total")}
            >

above, among props of Button, active make button being selected.

So I make it conditional as below.

enter image description here

However it throws error. Error says: '...' expected.ts(1005)

So I make with ...

 <Button
                  id="order-button"
                  variant="light"
                  style={{ width: 80 }}
                  {...(orderStandard == "total" ? active : null)}
                  onClick={() => setOrderStandard("total")}
                >

But when I wrote code above, It says active props is not defined.

enter image description here

How can I make it?

Tags:

2

Answers


  1. 0

    Try it like this: active={orderStandard == "total" ? true : false)}

    If he scolds false you can try with null and undifined

    Login or Signup to reply.
  2. 0

    You’re getting 'active' is not defined because you’re trying to use active as a variable instead of using it as an attribute of Button.

    Try this instead

     <Button
  id="order-button"
  variant="light"
  style={{ width: 80 }}
  active={orderStandard == "total"}
  onClick={() => setOrderStandard("total")}
 >
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search