Next.js Discord

Discord Forum

Pass data to a parent

Answered
WhyFencePost (Ping Reply) posted this in #help-forum
Open in Discord
WhyFencePost (Ping Reply)OP
Hi, newb here. How do i pass data to a parent? I currently have a usestate and useeffect setup on one of my components (a singular page in a multi page form). I now need to figure out how to get the data to the parrent for processing. How?

current component:
function LoginPage1() {
  const [userString, setUserString] = useState();

  function setData(formData:any) {
    const userStringData = formData.get("userString");
    if (userStringData) {
      setUserString(userStringData);
    }
  }

  useEffect(() => {
    if (userString) {
      alert(userString);
    }
  }, [userString]);

  return (
    <>
      <div className="w-full h-full flex justify-center items-center md:hidden">
        <form className="w-56" action={setData}>
          <div className="w-56 h-24"></div>
          <FormHeader subheader="Your gateway to bookings">Jericho Account</FormHeader>
          <div className="w-56 h-48"></div>
          <MenuInput id="userString">Username or Email</MenuInput>
          <div className="w-56 h-6"></div>
          <MenuButton size="lg" variant="main" sub="true">Next</MenuButton>
          <div className="w-56 h-6"></div>
          <FormMinorText>Or</FormMinorText>
          <div className="w-56 h-2"></div>
          <MenuButton size="lg">I forgot my login</MenuButton>
        </form>
      </div>
    </>
  );
}


and the parrent just uses that component, as well as others, and needs to get the userString data from this in a way that i can run useEffect on it
Answered by Sun bear
You could do it like this:

function ParentComponent() {
  const [userString, setUserString] = useState('');

return <ChildComponent userString={userString} setUserString={setUserString} />
}


Then in your Child component you just use userString and setUserString and it will be available in your parent.

You could also do it a bit nicer especially when using more states but thats how you can do it in general
View full answer

8 Replies

Sun bear
You could do it like this:

function ParentComponent() {
  const [userString, setUserString] = useState('');

return <ChildComponent userString={userString} setUserString={setUserString} />
}


Then in your Child component you just use userString and setUserString and it will be available in your parent.

You could also do it a bit nicer especially when using more states but thats how you can do it in general
Answer
WhyFencePost (Ping Reply)OP
thanks
@Sun bear You could do it like this: js function ParentComponent() { const [userString, setUserString] = useState(''); return <ChildComponent userString={userString} setUserString={setUserString} /> } Then in your Child component you just use userString and setUserString and it will be available in your parent. You could also do it a bit nicer especially when using more states but thats how you can do it in general
WhyFencePost (Ping Reply)OP
upon doing that with mine my usefect (i have moved it to the parent and rewriten is) no longer triggers:
const [pwString, setPwString] = useState();
  const [userString, setUserString] = useState();
  let state = 1;

    useEffect(() => {
    if (pwString) {
      state = 0;
      //Login Logic
      //Wait in debug and switch to 3
      state = 3; //debug
    } else if (userString) {
      state = 0;
      //Login Logic
      //Wait in debug and switch to 2
      state = 2; //debug
    }
  }, [userString, pwString]);
WhyFencePost (Ping Reply)OP
pls someone
WhyFencePost (Ping Reply)OP
k, if you want me to explain, this is a multi part login form, and i need to save the data. That is the usestate. The second part there (useeffect) just figures out which page of the form should be displayed (probably not in a smart way)
WhyFencePost (Ping Reply)OP
the useefect is never triggerd by the button, everything else works
or it does not change propperly based on state