React, TSX Parsing error: Expression expected - tsx

Question

Below is REACT code for details page
Ticket is a primary object, and what i want to do is when downloading add the ticket name as .pdf filename.
So i need a solution to pass the concrete ticket name to the handleDownload function
In the render section there are no problem declaring ticket.ticketName etc. But with onClick the problem arises.
type TicketProps =
TicketStore.TicketState &
typeof TicketStore.actionCreators &
RouteComponentProps<{ticketId: string}>;
class Ticket extends React.PureComponent<TicketProps> {
public componentDidMount() {
this.ensureDataFetched();
}
private ensureDataFetched(){
this.props.requestTicket(+this.props.match.params.ticketId);
}
handleDownload = () =>{
Axios.get(`${apiUrl}/api/tickets/download/${this.props.match.params.ticketId}`,{responseType: 'arraybuffer',
headers: { "Content-Type": 'application/pdf' }
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', "test"+.pdf");
document.body.appendChild(link);
link.click();
});
}
public render() {
let ticket = this.props.ticket;
if(this.props.isLoading){
return <span>Laen andmeid...</span>;
}
if (ticket === undefined) {
return <h1>Piletit ei leitud</h1>;
}
let name = ticket.ticketName
return (
<React.Fragment>
<h3>Üritus: {ticket.ticketName}</h3>
<Table striped hover size="sm">
<tbody>
<tr>
<td className="details">Asukoht:</td>
<td>{ticket.eventLocation}</td>
</tr>
<tr>
<td className="details">Kuupäev:</td>
<td>{ticket.eventDate}</td>
</tr>
<tr>
<td className="details">Lisainfo:</td>
<td>{ticket.extraInfo}</td>
</tr>
<tr>
<td className="details">Pilet:</td>
<td>{ticket.pdfTicket}</td>
</tr>
</tbody>
</Table>
<Button onClick={this.handleDownload}>Lae alla</Button>
<Popup trigger={<button className="btn btn-primary">Show location on map</button>} position="bottom left">
<div><Maps aadress={ticket.eventLocation}></Maps>></div>
</Popup>
<Link to='../tickets'>
<Button color='primary' onClick={()=>{}}>
Tagasi
</Button>
</Link>
<br></br>
</React.Fragment>
);
}
}
export default connect(
(state: ApplicationState) => state.ticket,
TicketStore.actionCreators
)(Ticket as any);
I am getting parsing error after ticket?
Any thoughts?
Thanks

Answer 1

Use the following code without the question marks:
<Button onClick={()=>{this.handleDownload(ticket.id,ticket.ticketName)}}>Lae alla</Button>

Answer 2

The solution was to add
if(this.props.ticket===undefined){
return //something;
}
Before using the object.