How to call a Function in UseEffect?

Question

I want to call below mentioned function onSaveInputValue into the useEffect so that, my component can have passed value in childInputValue hook whenever the page gets loaded.

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

I have tried to do so but couldn't do it. Please guide me.

In case if you like to see the full code of components then it is mentioned as below.

Parent Component:-

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;

Child Component:-

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;

`useEffect(() => { onSaveInputValue("initial value"); }, []);` — , May 12 '22 at 09:20
Just pass your initial state to `useState()`, don't even need to call this function. — Patrick Roberts, May 12 '22 at 09:21
Sir, i tried to do the same then got the error. 'onSaveInputValue' & 'value' is not defined — Samriddha Bajpai, May 12 '22 at 09:23
`useState(() => fetchInitialValue())`, you do not need to call `useEffect` — Olivier Boissé, May 12 '22 at 09:25
@SamriddhaBajpai — `value` *is* undefined because you never define it. I have no idea what you expect it to be. — Quentin, May 12 '22 at 10:10

Fabian Sievert · Answer 1 · 2022-05-12T10:45:05.803

-1

You can remove a lot of stuff

import { useEffect, useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [childInputValue, setChildInputValue] = useState(null);

  return (
    <div>
      <h1>Parent Component</h1>
      <p>{childInputValue}</p>

      {/* We pass function to the child component. */}
      <Child onSaveInputValue={setChildInputValue} />
    </div>
  );
};

export default Parent;

edited May 12 '22 at 10:45

answered May 12 '22 at 10:08

Fabian Sievert

810
5
15

Here, Error will come as 'onSaveInputValue' is not defined beacuse it isn't. – Samriddha Bajpai May 12 '22 at 10:17
You are right, I didn't change the callback name. If the error now persists, it has to be with Child. – Fabian Sievert May 12 '22 at 10:46

How to call a Function in UseEffect?

1 Answers1