[SalesForce] How to get the Id of a newly created record in LWC and pass to the Apex Controller

I created a lightning-record-edit-form to create records and get a QrCode.
Everything is fine until I got to save the record and link it to another sObject.
I can't pass the newly record to the Apex Controller.
All I get is a "null input to JSON parser"
This is my code,
I'm not good at LWC, I'm still learning.
I hope I was clear enough, thanks in advance

Apex Class

@AuraEnabled
public static void savePrenotazione(String prenotazioneObj,String disponibilitaObj) {
    List<Disponibilit__c> listDispTrovate;
    Prenotazione__c prenotazione = new Prenotazione__c();
    Type dispType = Type.forName('List<Disponibilit__c>');
    Type prenType = Type.forName('Prenotazione__c');

    listDispTrovate = (List<Disponibilit__c>) JSON.deserialize(
        disponibilitaObj,
        dispType);
    System.debug('listDispTrovate :' + listDispTrovate);
    System.debug('prenotazioneObj :' + prenotazioneObj);
    prenotazione =  (Prenotazione__c) JSON.deserialize(
        prenotazioneObj,
        prenType);

    System.debug('prenotazione :' + prenotazione);
    insert prenotazione;

    if (!listDispTrovate.isEmpty() && prenotazione.Privacy_T__c) {
        System.debug('Prenotazione :' + prenotazione.id);

        for (Disponibilit__c d : listDispTrovate) {
            d.Prenotazione_T__c = prenotazione.id;
            d.Prenotato_T__c = true;
        }
        update listDispTrovate;
        List<Disponibilit__c> listControllo = [
            SELECT Id, Prenotazione_T__c, Prenotato_T__c
            FROM Disponibilit__c
            WHERE Prenotazione_T__c = :prenotazione.Id AND Id IN :listDispTrovate
        ];

        if (listControllo.size() == listDispTrovate.size()) {
            System.debug('tutto ok prenotazione Conclusa');
        } else {
            System.debug('Problema  da gestire');
        }
    }
}  

Javascript

import { LightningElement, api, track, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import dispCamera2 from '@salesforce/apex/SSG_T_Controller_PrenotazioneLWC.getDispCamera2';
import savePrenotazione from '@salesforce/apex/SSG_T_Controller_PrenotazioneLWC.savePrenotazione';
import dataInizio from '@salesforce/label/c.SSG_Data_inizio_soggiorno';
import dataFine from '@salesforce/label/c.SSG_Data_fine_soggiorno';
import viaggiDaSolo from '@salesforce/label/c.SSG_viaggi_da_solo';
import numeroPersone from '@salesforce/label/c.SSG_numero_persone';



import CAMERA_OBJECT from '@salesforce/schema/Camera__c';
import PRENOTAZIONE_OBJECT from '@salesforce/schema/Prenotazione__c';

import TIPOLOGIA_FIELD from '@salesforce/schema/Camera__c.Tipologia_T__c';
import STATO_FIELD from '@salesforce/schema/Prenotazione__c.Stato_T__c';
import PAGAMENTO_FIELD from '@salesforce/schema/Prenotazione__c.Modalit_di_pagamento_T__c';


import { getObjectInfo, getPicklistValues } from 'lightning/uiObjectInfoApi';
import userId from '@salesforce/user/Id';



var cameraName;
const columns = [
    { label: 'Disponibilità', fieldName: 'Id' },
    { label: 'Data inizio', fieldName: 'Data_inizio_fascia_T__c', type: 'date' },
    { label: 'Data fine', fieldName: 'Data_fine_fascia_T__c', type: 'date' },
    // { label: 'Camera', fieldName:  },
];


export default class formPrenotazioneLWC extends LightningElement {
    @api recordId;

    @track isOne = false;
    @track camere;
    valueTipologia;
    dataInizio;
    dataFine;
    isDaSolo;
    nPersone;
    stato;
    tipoCamera;
    modPagamento;
    isPrivacy;
    isPerTe;
    columns = columns;
    data = [];
    showDisponibilita;
    prenotazioneObj;

    label ={
        dataInizio,
        dataFine,
        viaggiDaSolo,
        numeroPersone

    };



    @wire(getObjectInfo, { objectApiName: CAMERA_OBJECT })
    objectInfo;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: TIPOLOGIA_FIELD })
    tipologiaPicklistValues;

    @wire(getObjectInfo, { objectApiName: PRENOTAZIONE_OBJECT })
    prenotazioneInfo;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: STATO_FIELD })
    statoPicklistValues;

    @wire(getObjectInfo, { objectApiName: PRENOTAZIONE_OBJECT })
    prenotazioneInfo;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: PAGAMENTO_FIELD })
    pagamentoPicklistValues;





    handleDataInizio(event) {
        this.dataInizio = event.detail.value
        console.log('DATA INIZIO : ' + JSON.stringify(this.dataInizio));
    }

    handleDataFine(event) {
        this.dataFine = event.target.value
        console.log('DATA FINE : ' + JSON.stringify(this.dataFine));

    }

    handleChangeTravel(event) {
        this.isDaSolo = event.detail.checked;
        console.log('DA SOLO ?  : ' + JSON.stringify(this.isDaSolo));
        let element = this.template.querySelector('[data-id="nPers"]');
        element.value = "1"
        this.nPersone = element.value;
        // (this.isDaSolo ==  true) ? this.isOne = true : this.isOne = false;
        console.log('Numero persone in da solo : ' + JSON.stringify(this.nPersone));

    }

    handleChangePersone(event) {
        this.nPersone = event.detail.value;
        let element = this.template.querySelector('[data-id="numPers"]');
        element.value = this.nPersone;
        console.log('Numero persone : ' + JSON.stringify(this.nPersone));

    }

    handleChangeStato(event) {
        this.stato = event.target.value;
        console.log('STATO : ' + JSON.stringify(this.stato));
    }

    handleChangeTipologia(event) {
        this.valueTipologia = event.detail.value;
        console.log('TIPOLOGIA CAMERA : ' + JSON.stringify(this.valueTipologia));
    }

    handleChangePagamento(event) {
        this.modPagamento = event.target.value;
        console.log('MODALITA PAGAMENTO : ' + JSON.stringify(this.modPagamento));
    }

    handleChangePrivacy(event) {
        this.isPrivacy = event.detail.checked;
        console.log('IS PRIVACY  : ' + JSON.stringify(this.isPrivacy));
    }

    handleChangePerTe(event) {
        this.isPerTe = (event.target.value === 'Si') ? true : false;
        console.log('PER TE : ' + JSON.stringify(this.isPerTe));
    }



    callApex() {
        this.showDisponibilita = true;
        // let disponibilitaId;

        console.log('this.showDisponibilita :  ' + JSON.stringify(this.showDisponibilita));
        dispCamera2({
            dataInizio: this.dataInizio, dataFine: this.dataFine, isDaSolo: this.isDaSolo, nPersone: this.nPersone, stato: this.stato,
            tipologiaCamere: this.valueTipologia, modPagamento: this.modPagamento, isPrivacy: this.isPrivacy, isPerTe: this.isPerTe
        })
            .then(result => {
                this.camere = result;
                this.data = result;
                this.error = undefined;
                console.log('Disponibilità : ' + JSON.stringify(this.data));
                // console.log("ID disponibilità " + disponibilitaId);
                // console.log("camera name " + cameraName);
            })
    }


    handleSuccess(event) {
        this.dispatchEvent(
            new ShowToastEvent({
                title: "Disponibilità creata",
                message: "Record ID: " + event.detail.id,
                variant: "success"

            }),
        );
        let revId = event.detail.id
        this.openModal(revId);
    }



    handleSubmit(event) {
        console.log('prenotazione : ' + JSON.stringify(event.detail));
        console.log('tipo prenotazione : ' + typeof(event.detail));
        console.log('disponibilità : ' + JSON.stringify(this.data[0]));
    }


    handleChange(event) {

    }

    get optionsPersone() {
        return [
            { label: "1", value: "1" },
            { label: "2", value: "2" },
            { label: "3", value: "3" },
            { label: "4", value: "4" },
            { label: "5", value: "5" },
            { label: "6", value: "6" },
            { label: "7", value: "7" },
            { label: "8", value: "8" },
            { label: "9", value: "9" },
            { label: "10", value: "10" },
        ];
    }
    get optionsPerTe() {
        return [
            { label: "Si", value: "Si" },
            { label: "No", value: "No" },
        ];
    }



    openModal(revId) {
        const chuildComponent = this.template.querySelector('c-modal-Form-Prenotazione');
        chuildComponent.modalHeading = "Reservation QR Code";
        chuildComponent.message = "Success";
        chuildComponent.openModal();
        setTimeout(() => { chuildComponent.generateQrCode(revId); }, 2000);
    }

}

HTML

 <template>
    <c-modal-Form-Prenotazione></c-modal-Form-Prenotazione>
    <lightning-card title="Prenotazione Record Form">
      <lightning-record-edit-form
        object-api-name="Prenotazione__c"
        onsubmit={handleSubmit}
        onsuccess={handleSuccess}
      >

        <lightning-messages></lightning-messages>
        <lightning-input-field
          field-name="Data_Inizio_soggiorno_T__c"
          onchange={handleDataInizio}
        >
        </lightning-input-field>

        <lightning-input-field
          field-name="Data_fine_soggiorno_T__c"
          onchange={handleDataFine}
        >
        </lightning-input-field>

        <lightning-input-field
          field-name="Viaggi_da_solo_T__c"
          onchange={handleChangeTravel}
        >
        </lightning-input-field>

        <lightning-combobox
          name="Numero persone"
          label="Numero persone"
          data-id="nPers"
          value={value}
          placeholder="Seleziona un numero"
          options={optionsPersone}
          onchange={handleChangePersone}
          read-only={isDaSolo}
        >
        </lightning-combobox>

        <lightning-input-field
          field-name="Stato_T__c"
          onchange={handleChangeStato}
        >
        </lightning-input-field>

        <lightning-input-field
          data-id="numPers"
          field-name="Numero_persone_T__c"
          style="display: none"
        >
        </lightning-input-field>

        <lightning-input-field
        data-id="dispo"
        field-name="Disponibilit_T__c"
        style="display: none"
      >
      </lightning-input-field>

        <template if:true={tipologiaPicklistValues.data}>
          <lightning-combobox
            name="progress"
            label="Tipologia camera"
            value={valueTipologia}
            placeholder="Seleziona una tipologia"
            options={tipologiaPicklistValues.data.values}
            onchange={handleChangeTipologia}
          >
          </lightning-combobox>
        </template>

        <lightning-input-field
          field-name="Modalit_di_pagamento_T__c"
          onchange={handleChangePagamento}
        >
        </lightning-input-field>

        <lightning-input-field
          field-name="Privacy_T__c"
          onchange={handleChangePrivacy}
          required
        >
        </lightning-input-field>
        <lightning-input-field
          field-name="La_prenotazione_per_te_T__c"
          onchange={handleChangePerTe}
        >
        </lightning-input-field>
        <lightning-button
          type="button"
          name="Controlla disponibilità"
          label="Controlla disponibilità"
          onclick={callApex}
        >
        </lightning-button>

        <template if:true={showDisponibilita}>
          <lightning-datatable key-field="id" data={data} columns={columns}>
          </lightning-datatable>
          <lightning-button
          type="submit"
          name="submit"
          label="Crea Prenotazione"
        >
        </lightning-button>
        </template>

      </lightning-record-edit-form>
    </lightning-card>
  </template>

Best Answer

You should be able to see it in handleSuccess,

handleSuccess(evt){
   console.log(evt.detail.id);
}

Can you please post generateQrCode function from modal component. This error usually appears if null is passed to JSON.parse