Trying to pass data between components

JavaScript
1

So… I’m a bit stumped here and any help would be great, guys.

I got some data that I’m trying to pass from a form component to another different component where I can do some validation. The data seems to be receiving all the data in the parent component up until I assign the userData prop.

DataInput

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

 export default function DataInput() {

    //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();

    //Submit form, pass data to validator

    const formSubmissionHandler = event => {
        event.preventDefault();

        const rawUserData = {
            name: nameInputRef.current.value,
            surname: surnameInputRef.current.value,
            country: countryInputRef.current.value,
            birthday: birthdayInputRef.current.value
        };

        <ValidateUser userData = {rawUserData}/>
        
    };



     return(
        <form onSubmit={formSubmissionHandler}>
            <body className = "DataInput">

                    <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"
                        >
                            Save

                        </LoadingButton>
                    </div>
            </body>
        </form>
     );
}

But then when I try to log it over the child component to see if data got there, I don’t get anything. Inspecting the props it shows up as " :any" instead of the data structure last seen over userData so I’m not sure if I’m missing some step along the way, if I’m trying to call the child component correctly or what.

Thanks in advance.

ValidateUser

import React from 'react';

const ValidateUser = (props) => {

    
    return(
        <div>
            {console.log(props.name)}
        </div>

    );

}


export default ValidateUser;
2

That’s not how you use React. You can’t just randomly put a component in a function and expect it to be called. Child components must be in the return function of the parent function.

1 Like
3

Thanks for the pointer. I went and changed how things were being assigned in order to be able to get the data into the scope and it’s working now.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.