import React from "react"; import "./styles.css"; const separator = "/"; class Invitation extends React.Component { state = { toggleButton: true, userName: "" }; ticketsCheckDocument = e => { const [ticketUniqueNumber, lotType, Name] = e.target.value.split(separator); console.log(ticketUniqueNumber); console.log(lotType); console.log(Name); this.setState({ toggleButton: false }); this.setState({ userName: Name }); }; ticketChange = () => { this.setState({ toggleButton: true }); this.setState({ userName: "" }); }; render() { const { lot, index } = this.props; return (

{lot.lotType === "U" ? "Unissex" : lot.lotType === "M" ? "Male" : "Female"}{" "}
R$ {lot.lotPrice}

{this.state.userName}

The invitations are nominal.
Please indicate below who will use this invitation

{this.state.toggleButton ? (

) : ( )}

); } } export default class Card extends React.Component { constructor(props) { super(props); this.state = { toggleButton: true, lots: [ { lotNumber: "1", lotPrice: "10.00", lotPriceTax: "0.00", lotType: "U", lotUniqueNumber: "xZ38Dw7bDwD33z469xcB4yy3b64D3z", quantity: 2, ticketName: "Camarote", ticketPrevenda: "false", ticketUniqueNumber: "3WaDBCcawdzyZdAZYBCBz1zb170x47", total: 20, totalLotPrice: 10 }, { lotNumber: "1", lotPrice: "10.00", lotPriceTax: "0.00", lotType: "M", lotUniqueNumber: "xZ38Dw7bDwD33z469xcB4yy3b64D3z", quantity: 2, ticketName: "Camarote", ticketPrevenda: "false", ticketUniqueNumber: "3WaDBCcawdzyZdAZYBCBz1zb170x47", total: 20, totalLotPrice: 10 } ], userName: "" }; this.ticketsCheckDocument = this.ticketsCheckDocument.bind(this); this.ticketChange = this.ticketChange.bind(this); } ticketsCheckDocument(e) { const [ticketUniqueNumber, lotType, Name] = e.target.value.split(separator); console.log(ticketUniqueNumber); console.log(lotType); console.log(Name); this.setState({ toggleButton: false }); this.setState({ userName: Name }); } ticketChange() { this.setState({ toggleButton: true }); this.setState({ userName: "" }); } render() { const lots = this.state.lots.map((lot, l) => ( )); return

{lots}

; } }

{lot.lotType === "U" ? "Unissex" : lot.lotType === "M" ? "Male" : "Female"}{" "} R$ {lot.lotPrice}

{this.state.userName}

{lot.lotType === "U" ? "Unissex" : lot.lotType === "M" ? "Male" : "Female"}{" "}
R$ {lot.lotPrice}