How to pass object using one function?-CodePudding

How can I pass the object from one component to another using only one function? I want to send key and value from "PersonalData" (nested component) and recognize them and store in userFormular (main component).

I can pass many functions to the components as a props but if I have more than 4 it does not look clean.

import React, {useState} from 'react'
import PersonalData from './PersonalData'

export default function UserFormular() {
    const initialData={
        name:'Johnny',
        lastName:'Bravo',
        email:'[email protected]'
    }
    const [data,setData] = useState(initialData)   
    function updateData(){       
        <1???>
    }    
       return( 
             <PersonalData updateData={updateData} />
       )   
}

import React, {useContext, useState} from 'react'
import {MyContext} from '../utils/CustomContext'
import Header from './Header'
//MATERIAL UI 

import TextField from '@mui/material/TextField';

//START
export default function PersonalData({updateData, nextPage }) {
    const [name,setName]=useState("Name")
    const [lastName,setLastName]=useState("Last name")
    const [email,setEmail]=useState("email")


    const darkMode = useContext(MyContext)
    const myStyle={
        myButtonContainer:{
            marginTop:"100px",
            display:"flex",
            flexDirection:"column",
            justifyContent:"center",
            alignItems:"center"
        },
        myButton:{
            backgroundColor:darkMode ? "#888" : "#111",            
        }
    }
 
    function handleData(e){
        updateData();
        <2???>
    }
    return (
       <>        
            <div style={myStyle.myButtonContainer}>              
                <TextField
                    helperText="Please enter your name"                    
                    label={name}
                    onChange={handleData}
                    sx={{m:6, mb:2}}
                />
                <TextField
                    helperText="Please enter your last name"                    
                    label={lastName}
                    onChange={handleData}
                    sx={{m:2}}
                />
                <TextField
                    helperText="Please enter your email"                    
                    label={email}
                    onChange={handleData}
                    sx={{m:2}}
                />
            </div>      
        </>       
    )
}

Thank you for the answer. Kamil

CodePudding user response：

I'm not sure if this is the cleanest way but i believe this is what you want.

If what you want is initialization through a function then you can use useEffect.

change updateData so it would return the state you want to share with the child.

const updateData = () => data;

Then in child component use useEffect to call the getData, read the new state, and update the child state.

useEffect(() => {
    const data = updateData();
    setName(data.name);
    setLastName(data.lastName);
    setEmail(data.email);
}, [getData]);

This function will run on mount, or whenever the function is redefined because of state change in parent component.

You can check my sandbox here.

CodePudding user response：

One suggestion to make the code look much cleaner: Define an interface to simplify the data

export interface DataInterface {
    name: string;
    lastName: string;
    email: string;
}

And in the PersonalData function:

const [data,setData]=useState<DataInterface>();

useEffect(() => {
    const data = updateData();
    setData(data);
}, []);