How do I pass this data from child to parent component?

Question

I simply want to use a data that has been calculated in a child component and also use the same data in my parent component. How do i do so? This is my current approach, it works but i get this error:

Cannot update a component from inside the function body of a different component

Please suggest a correct method.

Parent:


const Parent = () => {
  const [myValue, setMyValue] = useState("");
  const getValue = (value) => {
    setMyValue(value);
  };

  return (
      <div className={styles.innerContainer}>
        <div className={styles.introPara}>{myValue}</div>
        <Child passToParent={getValue} />
      </div>

  );
};

export default Parent;

Child

const Child = ({ passToParent }) => {
  let url = "www.google.com";
  const findUrl = () => {
    return url;
  };
  let finalValue = findUrl();
  const finalText = finalValue.toUpperCase();

  passToParent(finalText);

  return (
    <div>
      <a href={finalValue}>
        <div>{finalText}</div>
      </a>
    </div>
  );
};

export default Child;

I want to use the finalText in both Child and Parent components but i don't want to repeat the logic i'm using in finalUrl( ). Currently i'm simply using passToParent( ) and it works but gives error.

Does this answer your question? [Call child method from parent](https://stackoverflow.com/questions/37949981/call-child-method-from-parent) — im_baby, Jun 30 '21 at 19:23
@im_baby The other question link's answers do not work in my case. I dont want to trigger anything onClick and get that value. I just want to simply pass and use the same value in parent — zigaish, Jun 30 '21 at 19:41
Have you tried passing `setMyValue` as the prop instead of `getValue`? — im_baby, Jun 30 '21 at 19:45

score -1 · Answer 1 · answered Jun 30 '21 at 19:20

try this - just pass myValue - instead getFunction:

getValue - this is the function - it's should be triggered on some user actions eg. onClick, onMouseEnter etc.
You hold myValue in useState reactHook - it's type: string
In child u destructurizing props - so there is option just to write it without processing.
Also there is possibility to pass function to child component

const Parent = () => {
  const [myValue, setMyValue] = useState("");

  const getValue = (value) => {
    setMyValue(value);
  };

  return (
      <div>
        <Child passToParent={myValue} />
      </div>

  );
};

export default Parent;

const Child = ({ passToParent }) => {

  return (
    <div>
      <a>
        <div>{passToParent}</div>
      </a>
    </div>
  );
};

export default Child;

Just by passing myValue wont trigger the getValue() function and it wont setMyValue to the new value — zigaish, Jun 30 '21 at 19:43

How do I pass this data from child to parent component?

1 Answers1