Padre.js

 import React, { useState } from 'react' import Child from './Child' const Parent = () => { const[data,setData] = useState('') const[name,setName] = useState('') const[toggled,setToggled] = useState(false) const[age,setAge] = useState('') const ageToChild = (ageData) =>{ setAge(ageData) } const childToParent = (childData) =>{ setData(childData) } const handleSubmit = (e) =>{ e.preventDefault() alert(`Age is ${age} , Form Submitted`) console.log(`Name is ${name} and Age is ${age}`) } return ( <> {data} <div> {/* <Child childToParent={childToParent}></Child> */} <form onSubmit={handleSubmit}> <label>Name : </label> <input type="text" value={name} onChange={(e)=>setName(e.target.value)}></input> <button type='button' onClick={()=>setToggled(!toggled)}>Age ?</button> {toggled && <Child childToParent={childToParent} ageToChild={ageToChild}></Child>} <button type='button'>Submit</button> </form> </div> </> ) } export default Parent

Niño.js

 import React from 'react' const Child = ({childToParent,ageToChild}) => { const data = "This is some data from the child component to parent" // const age = ageToChild return ( <> <button onClick={()=>childToParent(data)}>Click Child</button> <label>Age : </label> <input type='text' onChange={()=>ageToChild()}></input> </> ) } export default Child

Obtengo resultados como Name is inputtedname y Age is Undefined . ¿Cómo obtengo el valor de edad ingresado por el usuario registrado en la consola? Estoy tratando de pasar datos de niño a padre usando componentes funcionales