Html - How do I pass my state from a child component to a parent component, then to another child component of a different parent component?

lemon
January 27, 2024
228 views
0 votes
2 Answers

Currently working on a CV Creator as a mini React project, these are my current Components:

Creator
Form
Input
CvDisplay
(DisplayComponents)

I have a state in my Input component that updates upon every change in the input box, this is a simplified example of the component:

export default function Input() {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange(e) => {
    setInputValue(e.target.value);
  }

  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  )
}

I am trying to get the inputValue state to the Creator component, and then into the CvDisplay component, so when the inputValue changes from the Input component, the changes will display in real time in the CvDisplay component. An example of it being done would be here: https://cv-app-eta.vercel.app/

Beginner here so I would appreciate any advice, thank you!

I tried using a callback function, but it did not work as expected as there are multiple Input Components in the Form component.

Also tried lifting up the state, but could not manage to make it work as it’s technically a "grandparent to child" component instead of a parent to child component.

Answers

- MalikMuhammadAli
- January 27, 2024 at 7:55 am
- 0 votes
0
You can make use of the context api or redux toolkit to do this in easy way but as you say that you are a beginner you can make the inputValue state in the parent component and then pass it as a prop to the child component.

Login or Signup to reply.

- Khalif
- January 27, 2024 at 8:30 am
- 0 votes
0
In this state you can do in couple of ways like using some state management like the biuld-in Context api of the React, or a pacakeges like Redux or Zustand. but those pacakeges are somewhat complex and as you are beginner you can make it simple, if your parent components can be putted in another parent component and you can create the state in there and pass the state to the both the parents and those parents they will pass to their childs.

Here’s an example of how you might structure your components:

Creator Component:
This is where you’ll manage the state and handle the changes. It will pass down the state and a function to update the state to the Form component.
```
import React, { useState } from 'react';
import Form from './Form';
import CvDisplay from './CvDisplay';

export default function Creator() {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (value) => {
    setInputValue(value);
  }

  return (
    <div>
      <Form inputValue={inputValue} onInputChange={handleInputChange} />
      <CvDisplay inputValue={inputValue} />
    </div>
  );
}
```
Form Component:
This component will receive the inputValue and onInputChange function as props. It can then pass them down to the Input component.
```
import React from 'react';
import Input from './Input';

export default function Form({ inputValue, onInputChange }) {
  return (
    <div>
      <Input inputValue={inputValue} onInputChange={onInputChange} />
    </div>
  );
}
```
Input Component:
This component receives inputValue and onInputChange as props. When the input changes, it calls onInputChange to update the state in the Creator component.
```
import React from 'react';

export default function Input({ inputValue, onInputChange }) {
  const handleInputChange = (e) => {
    onInputChange(e.target.value);
  }

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
    </div>
  );
}
```
CvDisplay Component:
This component receives inputValue as a prop and displays it.
```
import React from 'react';
export default function CvDisplay({ inputValue }) {
  return (
    <div>
      <p>{inputValue}</p>
    </div>
  );
}
```
Now, whenever the input value changes, it will update the state in the Creator component, and the updated value will be passed down to the CvDisplay component, allowing you to see the changes in real-time.
Login or Signup to reply.