Ternary Operator in Button causes '...' expected TS(1005) error - reactjs

Question

I am using a ternary operator in button and facing '...' expected, TS(1005) error. The syntax in question is exactly as provided in the reactjs website. (example:1)
(Example: 1)
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
My Code is:
import React, { useState } from 'react'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import Modal from 'react-bootstrap/Modal'
import { Link } from 'react-router-dom'
export default function LoginSignupModal() {
const [show, setShow] = useState(false)
const handleClose = () => setShow(false)
const handleShow = () => setShow(true)
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [errorPassword, setErrorPassword] = useState(false)
function handleRegister() {
console.log("name", name)
}
function handlePasswordConfirmation(data) {
if (data.target.value != password) {
console.log("didn't match")
setErrorPassword(true)
} else {
console.log("matched")
setErrorPassword(false)
}
}
return (
<>
<Button variant="primary" onClick={handleShow} style={{ marginLeft: '5px' }}>
Signup
</Button>
<Modal
show={show}
onHide={handleClose}
backdrop="static"
keyboard={false}
>
<Modal.Header closeButton>
<Modal.Title>Registration Form</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="signupName">
<Form.Label>Name</Form.Label>
<Form.Control value={name} onChange={(data) => setName(data.target.value)} placeholder="John Doe" />
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control value={email} onChange={(data) => setEmail(data.target.value)} type="email" placeholder="xyz#email.com" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control value={password} onChange={(data) => setPassword(data.target.value)} type="password" placeholder="Password" />
</Form.Group>
<Form.Group controlId="formBasicPasswordConfirmation">
<Form.Label>Confirm Password</Form.Label>
<Form.Control type="password" onChange={(data) => handlePasswordConfirmation(data)} placeholder="Re-enter Password" />
</Form.Group>
<-- **ERROR IN THE FOLLOWING LINE** -->
<Button variant="primary" type="submit" {(errorPassword) ? "disabled" : "active"}>Register</Button>
<Button variant="secondary" onClick={handleClose} style={{ marginLeft: "5px" }}>Close</Button>
</Form>
</Modal.Body>
<Modal.Footer>
By signing up, you agree to our privacy policy and terms and conditions.
</Modal.Footer>
</Modal>
</>
);
}
Here I am trying to add disabled/active on a button depending on errorPassword state. but it's giving me an error.
Error generating code part:
<Button variant="primary" type="submit" {(errorPassword) ? "disabled" : "active"}>Register</Button>

Answer 1

disabled and active are separate boolean props, those variants should work:
// Recommended
<Button disabled={errorPassword} active={!errorPassword}>
Register
</Button>
// Unreadable
<Button {...{ [errorPassword ? "disabled" : "active"]: true }}>
Register
</Button>
// Same as above just a bit more readable
const errorPasswordProps = { [errorPassword ? "disabled" : "active"]: true };
<Button {...errorPasswordProps}>Register</Button>;

Answer 2

This is how material set its ternity in its source-code
<Button {...(errorPassword ? { disabled: true } : { active: true })}>
Register
</Button>
but the better way to express this would be to define hasError property in Button itself and pass hasError={errorPassword}