Getting undefined when passing data between components

[Geriath]

I’m trying to pass some user data to another component that’s going to show up in a box.

Things seem to be going well enough until I try to call the component responsible for creating this box and displaying the data. The data it’s receiving is undefined. I thought that what might be happening is that the variable I’m using to store the user data isn’t being changed during the state and when the program reads the code it’s assigning it before it even gets the chance to do anything with the variable.

I tried creating an useState hook userData instead of saving it inside a let variable, but this ends up creating an useEffect loop that keeps printing the console.log(isSubmited) over line 64.

I reverted back the code to the last stable version, but this brings me back to square one: The data is still undefined upon being received by MessageBox.

DataInput

import {
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
} from "@mui/material";
import { LoadingButton } from "@mui/lab";
import React, { useRef, useState, useEffect } from "react";
import SaveIcon from "@mui/icons-material/Save";
import "../styles/DataInput.css";
import ValidateUser from "./ValidateUser";
import MessageBox from "./MessageBox";

export default function DataInput(props) {
  //State & Ref Hooks
  const [country, setCountry] = useState("");
  
  const handleCountryChange = (event) => setCountry(event.target.value);

  const countryInputRef = useRef();
  const nameInputRef = useRef();
  const surnameInputRef = useRef();
  const birthdayInputRef = useRef();

  const [rawData, setRawData] = useState("");

  // I/O
  let returnUserData;

  const [isSubmited, setSubmited] = useState(false);


  const handleFormSubmission = (event) => {
    event.preventDefault();
    setSubmited(true);

    let data = {
      name: "",
      surname: "",
      country: "",
      birthday: "",
    };

    data.name = nameInputRef.current.value;
    data.surname = surnameInputRef.current.value;
    data.country = countryInputRef.current.value;
    data.birthday = birthdayInputRef.current.value;

    setRawData(data);
  };

  const getValidatedData = (params) => {
    returnUserData = { ...returnUserData, ...params };
    
    HandleMessageBox();
    
    props.sendData(returnUserData);
  };


  const HandleMessageBox = () => {

    console.log(isSubmited);
    useEffect(() => {
      //console.log(returnUserData);
      if(isSubmited){
        setSubmited(false);
        console.log(returnUserData);


      }
    }, [isSubmited]);
  }

  return (
    <div className="DataInput">
      <form>
        <div className="Input-Boxes">
          <div className="Box-Name">
            <TextField
              sx={{ input: { color: "blue" } }}
              label="Name"
              inputRef={nameInputRef}
              required
            />
          </div>

          <div className="Box-Surname">
            <TextField
              sx={{ input: { color: "blue" } }}
              label="Surname"
              inputRef={surnameInputRef}
              required
            />
          </div>

          <div className="Box-Country">
            <FormControl variant="filled" sx={{ minWidth: 220 }}>
              <InputLabel id="demo-simple-select-filled-label">
                Countries
              </InputLabel>

              <Select
                required
                labelId="demo-simple-select-filled-label"
                id="demo-simple-select-filled"
                label="Countries"
                value={country}
                autoWidth
                onChange={handleCountryChange}
                inputRef={countryInputRef}
              >
                <MenuItem value={"Brazil"}> Brazil </MenuItem>
                <MenuItem value={"Portugal"}> Portugal </MenuItem>
              </Select>
            </FormControl>
          </div>

          <div className="Box-Birthday">
            <TextField
              sx={{ input: { color: "blue" } }}
              label="Birthday"
              inputRef={birthdayInputRef}
              type="date"
              InputLabelProps={{ shrink: true }}
              required
            />
          </div>
        </div>

        <div className="Button-Save">
          <LoadingButton
            loadingPosition="end"
            endIcon={<SaveIcon />}
            variant="outlined"
            type="submit"
            onClick={handleFormSubmission}
          >
            Save
          </LoadingButton>

          <ValidateUser data={rawData} sendData={getValidatedData} />

          {isSubmited ? <MessageBox data = {returnUserData} /> : <div />}
        </div>
      </form>
    </div>
  );
}

MessageBox

import Box from "@mui/material/Box";
import React, {useState} from "react";
import "../styles/MessageBox.css";



const MessageBox = (props) => {
    console.log(props.data)
    if(props.data != undefined)
    {
        console.log(props.data)

        let validatedData = {
            name: "",
            surname: "",
            country: "",
            birthday: "",
        };

        validatedData.name = props.data.name;
        validatedData.surname = props.data.surname;
        validatedData.birthday = props.data.birthday;
        validatedData.country = props.data.country;


        let birthday = new Date(validatedData.birthday);
        let today = new Date();

        let age = (today.getFullYear - birthday.getFullYear)

        let greetingMessage = "Hello ${validatedData.name} from ${validatedData.country} on ${birthday.getDay} of ${birthday.getMonth} you will have ${age} years"

        return (
            <div className = "MessageBox">
                <Box sx = {{
                    width: 360,
                    height: 100,
                    backgroundColor: "rgba(197, 202, 100, 1)",
                }} >
                    {greetingMessage}
                </Box>
            </div>
        )
    }
    else {
        return (
            <div></div>
        )
    }


}

export default MessageBox;