ReactJS - Obtener variables 'props' desde un componente que levanta un Dialog

Estoy tratando de obtener el nombre a través de un botón que levanta un dialog desde un componente, la idea es que cuando pulse el botón este me traiga el nombre y el usuario de donde estoy llamando el componente DialogComentario.

//Componente que levanta el modalDialog

import { useBoolean } from '@fluentui/react-hooks/lib/useBoolean';
import { blue } from '@material-ui/core/colors';
import { DefaultButton, Dialog, DialogFooter, DialogType, PrimaryButton } from 'office-ui-fabric-react';
import * as React from 'react';
import styles from './ViewModal.module.scss';
import { sp, IList, IListEnsureResult, IItemAddResult, IFieldAddResult } from "@pnp/sp/presets/all";
import * as $ from 'jquery';

const modelProps = {
isBlocking: false,
styles: { main: { maxWidth: 450 } },
};
const dialogContentProps = {
type: DialogType.normal,
title: 'Escribe un mensaje de Cumpleaños',
//subText: 'Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.',
};

export const DialogComentario: React.FunctionComponent= () => {
const [hideDialog, { toggle: toggleHideDialog },] = useBoolean(true);

return (
<>
<DefaultButton name='nameSaludos' className={styles.saludarModal} onClick={toggleHideDialog} text="SALUDAR" />
<Dialog
maxWidth={'lg'}
hidden={hideDialog}
onDismiss={toggleHideDialog}
dialogContentProps={dialogContentProps}
modalProps={modelProps}
>
<textarea style={{width:'340px', height:'150px', color: 'black'}} id="idTextArea"></textarea>
<DialogFooter>
<PrimaryButton id="idEnviar" onClick={handleClick} text="Enviar" />
<DefaultButton onClick={toggleHideDialog} text="Cancelar" />
</DialogFooter>
</Dialog>
</>
);
};

function handleClick() {
const texto = $('#idTextArea').val();
$('#idEnviar').hide();
$('#idTextArea').prop('disabled',true);
sp.web.lists.getByTitle("Comentario Cumpleaños").items.add({
Comentario: texto
}).then(i => {
console.log('i:',i);
alert('Mensaje Enviado');
});
}

//Componente donde esta almacenado el modal Dialog y quiero rescatar el nombre del usuario.

import * as React from 'react';
import styles from './HappyBirthdayCard.module.scss';
import { IHappyBirthdayCardProps } from './IHappyBirthdayCardProps';
import { IHappyBirthdayCardPState } from './IHappyBirthdayCardState';
import { IPersonaSharedProps, Persona, PersonaSize, IPersonaProps, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
import { Label } from 'office-ui-fabric-react/lib/Label';
import * as moment from 'moment';
import 'bootstrap/dist/css/bootstrap.css';
import Button from 'react-bootstrap/Button';
import { sp, IList, IListEnsureResult, IItemAddResult, IFieldAddResult } from "@pnp/sp/presets/all";
import { DialogComentario } from '../../webparts/reactBirthdays/components/ViewModal';

export class HappyBirthdayCard extends React.Component<IHappyBirthdayCardProps, IHappyBirthdayCardPState> {

private _Persona: IPersonaSharedProps;
private _birthdayMsg: string = '';
constructor(props: IHappyBirthdayCardProps) {
super(props);
const photo: string = `/_layouts/15/userphoto.aspx?size=L&username=${this.props.userEmail}`;
console.log(photo);
this._Persona = {
imageUrl: photo ? photo : '',
imageInitials: this._getInitial(this.props.userName),
text: this.props.userName,
secondaryText: this.props.jobDescription,
tertiaryText: this.props.birthday,
};

this.state = {
isBirthdayToday: this._birthdayIsToday(this.props.birthday)
};

this._onRenderTertiaryText = this._onRenderTertiaryText.bind(this);
this._getInitial = this._getInitial.bind(this);
this._birthdayIsToday = this._birthdayIsToday.bind(this);
}

/*
private async handleClick(){
alert('Saludar');

sp.web.lists.getByTitle("Comentario Cumpleaños").items.add({
Comentario: 'Hola mundo'
}).then(i => {
console.log('i:',i);
});
}
*/

// Render
public render(): React.ReactElement<IHappyBirthdayCardProps> {
return (
<div className={styles.happyBirdthay}>
<div className={styles.documentCardWrapper}>
<div className={styles.documentCard}>
<div className={styles.actions}>
<DialogComentario {...this._Persona}/>
</div>
<Label className={styles.displayBirthday}>{this.props.birthday}</Label>
<div className={styles.personaContainer}>
<Persona
{...this._Persona}
size={PersonaSize.size48}
className={styles.persona}
onRenderTertiaryText={this._onRenderTertiaryText}
/>
</div>
</div>
</div>
</div>
);
}

// Today is Birthday ?
private _birthdayIsToday(birthday: string): boolean {
const _todayDay = moment().date();
const _todayMonth = moment().month() + 1;
const _birthdayDay = moment(birthday, 'Do MMM').date();
const _birthdayMonth = moment(birthday, 'Do MMM').month() + 1;

const _retvalue = (_todayDay === _birthdayDay && _todayMonth === _birthdayMonth) ? true : false;

return _retvalue;
}
// Get Initials
private _getInitial(userName: string): string {
const _arr = userName.split(' ');
const _initial = _arr[0].charAt(0).toUpperCase() + (_arr[1] ? _arr[1].charAt(0).toLocaleUpperCase() : "");
return _initial;
}
// Render tertiary text
private _onRenderTertiaryText = (props: IPersonaProps): JSX.Element => {
return (
<div>
<span className='ms-fontWeight-semibold' style={{ color: '#71afe5' }}>
{props.tertiaryText}</span>
</div>
);
}
}
export default HappyBirthdayCard;

No se si esta bien estoy comenzando en este mundo pero al "DialogComentario" le estoy pasando una const {...this._Persona} no se si es correcto para luego tratar de capturar el
this.props.userName y el this.props.userEmail, si no es asi como puedo pasarle al modal dialog esos parametros para poder mostralos.

Desde aca estoy consultando los datos userName y userMail

import * as React from 'react';
import styles from './HappyBirthday.module.scss';
import { IHappyBirthdayProps } from './IHappyBirthdayProps';
import { IHappbirthdayState } from './IHappybirthdayState';
import { escape } from '@microsoft/sp-lodash-subset';
import { IUser } from './IUser';
import HappyBirdthayCard from '../../controls/happyBirthdayCard/HappyBirthdayCard';
import * as moment from 'moment';
import { Image, IImageProps, ImageFit } from 'office-ui-fabric-react/lib/Image';
import { Label } from 'office-ui-fabric-react/lib/Label';
import * as strings from 'ControlStrings';
import { sp } from '@pnp/sp';
import * as $ from 'jquery';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import { useState } from 'react';

export interface propUser {
key: any
userName: any,
userEmail: any
}

export class HappyBirthday extends React.Component<IHappyBirthdayProps, IHappbirthdayState> {
private _showBirthdays: boolean = true;
constructor(props: IHappyBirthdayProps) {
super(props);
let AccDir: propUser[] = [];
var today = new Date();
//var mes = today
var formatFecha = today.toISOString();
var cutFecha = formatFecha.split('-');
var mesActual = parseInt(cutFecha[1]);
console.log('mesActual:',mesActual);
//Obtener Usuarios Tenant
$.ajax({
url: `/_api/Web/SiteUsers?&top=5000`,
method: "GET",
async: false,
headers: { "Accept": "application/json; odata=verbose" },
success: data => {
var obj = data.d.results;
console.log('obj1:',obj);
for(let i = 0; i < obj.length; i++){
console.log('UserId:',obj[i].UserId);

if(obj[i].Title != 'Aplicación de SharePoint' && obj[i].Title != 'Cuenta del sistema' && obj[i].Title != 'NT Service\\spsearch' &&
obj[i].Title != 'NT AUTHORITY\\LOCAL SERVICE' && obj[i].Title != 'Todos' && obj[i].Title != 'Aplicación de SharePoint' &&
obj[i].Title != 'Todos los usuarios (windows)' && obj[i].Title != 'Todos excepto los usuarios externos' && obj[i].Title != 'All Users (windows)'){
if(obj[i].Email != ''){
if(obj[i].UserId != null){
AccDir.push({
key: obj[i].Email,
userName: obj[i].Title,
userEmail: obj[i].Email
});
}
}
}
}
//
AccDir.map((item)=>{
console.log(item.userEmail);
$.ajax({
url: `/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='i:0%23.f|membership|`+item.userEmail+`'`,
method: "GET",
async: false,
headers: { "Accept": "application/json; odata=verbose" },
success: data => {
console.log('data:',data);
if (data != '') {
var band = false;
console.log('objUser:',data.d.length);
obj = data.d.UserProfileProperties.results;
for(let i = 0; i < obj.length; i++){
if(obj[i].Key == 'SPS-Birthday' && obj[i].Value != ''){
var fecha = obj[i].Value;
fecha = fecha.split(' ');
fecha = fecha[0];
var fechaMes = fecha.split('/');
fecha = fecha.split('/');
fecha = fecha[2]+'-'+fecha[1]+'-'+fecha[0];
var mesUser = parseInt(fechaMes[1]);
console.log('Fecha Cumpleaños:',fecha,'\nmesUser:',mesUser);
var bandF = true;
}
if(obj[i].Key == 'SPS-JobTitle' && obj[i].Value != ''){
var jobPosition = obj[i].Value;
console.log('jobPosition:',jobPosition);
}
}
if(bandF == true && mesActual == mesUser){
this.props.users.push({
key: item.userEmail,
userName: item.userName,
userEmail: item.userEmail,
jobDescription: jobPosition,
birthday: fecha,
message:'Hola',
anniversary:true
});
}
}
},
error: error => {
console.log("Error Search ", error);
}
});
});
//
},
error: error => {
console.log("Error Search ", error);
}
});
console.log('AccDir:',AccDir);
/*
this.props.users.push({ key: "[email protected]", userName: "Ely Michael Núñez De la Rosa", userEmail: "[email protected]", jobDescription: "Administrador de Sistemas", birthday: moment.utc("2000-8-16").local().format(), message: "Abogada",anniversary:true });
console.log('props:',props.imageTemplate);
*/
}

public async componentDidMount() {
}

public componentDidUpdate(prevProps: IHappyBirthdayProps, prevState: IHappbirthdayState): void {
}

//
public render(): React.ReactElement<IHappyBirthdayProps> {
return (
<div>
{
this.props.users.map((user: IUser) => {
return (
<div>
<HappyBirdthayCard
userName={user.userName}
jobDescription={user.jobDescription}
birthday={moment(user.birthday, ["MM-DD-YYYY", "YYYY-MM-DD", "DD/MM/YYYY", "MM/DD/YYYY"]).format('DD MMMM')}
anniversary={user.anniversary}
congratulationsMsg={user.message}
userEmail={user.userEmail}
imageTemplate={this.props.imageTemplate}
/>
</div>
);
})
}
</div>
);
}
}
export default HappyBirthday;

Saludos

Hola, podrías poner la parte del código dentro del componente del código? me está costando un poco leer el código. pero lo que te recomiendo es crear una función en el componente principal y luego se po pases

Lo siento por ser tan breve, estoy con el teléfono.

Estimado:
Ya lo hice no como mencionaste pero en vez de crear un componente configure los props y cree el modal directamente el componente padre y desde el componente raíz le envié los datos y pude capturarlos. Gracias.

Saludos.