How to transfer state between React components with hooks?

Question

With React classes when you have state in the constructor you could inherit it to the child component directly and from the child to the parent using callbacks. How can you transfer state from parent to child with hooks? Is the only way useReducer or Redux?

Props work the same regardless of functional component vs class-based component. State values and callbacks passed as props. — Drew Reese, May 18 '20 at 08:14

score 4 · Answer 1 · answered May 18 '20 at 08:22

The concepts of passing props down to child or conveying information from child to parent hasn't changed with the arrival of hooks.

Hooks provide, you a way to use lifecycle like functionality and states with functional components.

you can declare your state in parent with useState and pass it down as props to child component as you would normally have done with class components or functional components previously

For example:

const Parent =() => {
  const [count, setCount] = useState(0);
  return <Child count={count} setCount={setCount} />
}

const Child = ({count, setCount}) => {
  const updateCount = () => {
     setCount(prev=> prev + 1);
  }
  return (
      <div>
         <div>Count: {count}</div>
         <button type="button" onClick={updateCount}>Increment</button>
      </div>
}

You can refer this post for more details on lifecycles with hooks:

ReactJS lifecycle method inside a function Component

Please refer the react docs with hooks FAQs

How should this be written if the child is not a `const Child = ({1, 2}) => {/*component*/}` but instead `export default function Child(props) {/*component*/}`? — Fotios Tragopoulos, May 18 '20 at 08:37
you can use props.1 and props.2. That syntax is just object destructuring — Shubham Khatri, May 18 '20 at 09:02

score 1 · Answer 2 · answered May 18 '20 at 08:21

Perhaps, you should ask yourself why you would like to use inheritance. It seems like for many cases where many developers tend to immediately think about using OOP-style inheritance, React.js might recommend composition instead (see https://reactjs.org/docs/composition-vs-inheritance.html).

With functional components, composition is probably the only choice, which means that your "parent" component would render the "child" component, passing whatever state it needs to pass via the child's props.

Whether your project needs Redux or not should be completely orthogonal to the composition-vs-inheritance question.

score 1 · Accepted Answer · answered May 18 '20 at 08:25

1

Classes and functional components (or func-comp as my mate calls them) are the same in respect to props.

You can pass props from parent to child in a functional component just like how you'd do with a class.


//Parent

const Parent = () => {

const [state, setState] = React.useState({ products: 1, isAvailable: true})

const addProduct = (data) => {
// Your function
}

return (
<Child product info={state} addProduct={addProduct} />

)

}


export default Parent

And in the child component you can receive the props typically the way you would will classes.


const Child = ({productInfo, addProduct}) => {
 // Do what ever you like with the props
}

Cheers!

answered May 18 '20 at 08:25

Suraj Auwal

322
3
9

How should this be written if the child is not a `const Child = ({1, 2}) => {/*component*/}` but instead `export default function Child(props) {/*component*/}`? – Fotios Tragopoulos May 18 '20 at 08:37
@Fatios, I don't understand what you're saying. Care to clarify ? – Suraj Auwal May 18 '20 at 08:43
@SiradjiAwoual Perhaps @Fatios may be asking if it's still possible to use `Child` within `Parent` if they are in the same file, but exported immediately at declaration time. (I think `export default function Child...` would still bind `Child` within the file - correct me if I'm wrong) – user56828cc2 May 18 '20 at 09:01
I meant that it should be written as `export default function Navbar(props) { let data = props.data;}` There is not actually need for specifying in {productInfo, addProduct} the names of the hooks. But I think this covers everything. Thank you @SiradjiAwoual – Fotios Tragopoulos May 18 '20 at 09:04
The ```{productInfo, addProduct}``` is just me destructuring the props. So let say In my case , the child component is ```export default function Navbar(props) { let data = props.data}```if I console.log the data, I should see ```productInfo and addProduct```. – Suraj Auwal May 18 '20 at 09:35

How to transfer state between React components with hooks?

3 Answers3