search

Home  >  Q&A  >  body text

How to make conditional props in Bootstrap button group in ReactJS

I have useState as follows:

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

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

The code below is ButtonGroup with BootStrap for 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 the props of Button, active causes the button to be selected.

So I set it as the following conditions.

But it will throw an error. Error message: '...'expected.ts(1005)

So I use ...

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

But when I write the code above, it says active props are undefined.

How can I do it?

P粉010967136P粉010967136277 days ago320

reply all(1)I'll reply

  • P粉670107661

    P粉6701076612024-02-27 15:17:20

    You are receiving 'active' is not Defined because you are trying to use active as a variable instead of using it as a property of Button.

    Try this

     

    reply
    0
  • Cancelreply