Quiero llamar a la función mencionada a continuación onSaveInputValue en useEffect para que mi componente pueda haber pasado el valor en childInputValue hook cada vez que se carga la página.

 const onSaveInputValue = (value) => { setChildInputValue(value); console.log(childInputValue); };

He intentado hacerlo pero no pude hacerlo. Por favor guíame.

En caso de que desee ver el código completo de los componentes, se menciona a continuación.

Componente principal: -

 import { useEffect, useState } from "react"; import Child from "./Child"; const Parent = () => { const [childInputValue, setChildInputValue] = useState(); // useEffect(() => {}); const onSaveInputValue = (value) => { setChildInputValue(value); console.log("childVInputValue",value) }; return ( <div> <h1>Parent Component</h1> <p>{childInputValue}</p> {/* We pass function to the child component. */} <Child onSaveInputValue={onSaveInputValue} /> </div> ); }; export default Parent;

Componente hijo:-

 import React, { useEffect, useState } from "react"; import "./App.css"; function Child(props) { const [baseImage, setBaseImage] = useState(""); const uploadImage = async (e) => { const file = e.target.files[0]; const base64 = await convertBase64(file); setBaseImage(base64); props.onSaveInputValue(baseImage); }; const convertBase64 = (file) => { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = () => { resolve(fileReader.result); }; fileReader.onerror = (error) => { reject(error); }; }); }; useEffect(()=>{ console.log("useeeffect",baseImage) }) return ( <div > <input type="file" onChange={(e) => { uploadImage(e); }} /> <br></br> <img src={baseImage} height="200px" /> <hr/> </div> ); } export default Child;