CategoryUncategorized

React- How to update parent component state

React (also known as React.js or ReactJS) supports one-way data binding, whereas Angularjs supports two-way data binding.

Sometimes we come across a situation to update parent component state from child component. React does not recommended to update parent state from child component. If any component changes the state value, then those components are regarded as impure component.

In the following demo, we have a parent component (App.js)  with 3 different buttons which will display content in reusable modal. Here, States are maintained in parent component (App.js) and child component (ModalDialog.js) update the parent state (i.e Closing Dialog Method) by calling parent method through props.

Demo:

http://react-modal.amasik.com/

Source:

https://github.com/mail2asik/react-modal

React- When can we use Function and Class components

Sometimes we are confused as to when to use function and class components.

Function Component: 

  • Use if the component does not depend on any state, as it does not support states
  • Component have less HTML elements

Example: https://github.com/mail2asik/react-modal/blob/master/src/ModalDialog.js

Class Component: (Recommended)

  • Use if the component required states
  • Component may have more HTML elements and we can split it into multiple inner functions to reuse it in the same Class
  • Component may have event handler methods eg: onClick()

Example:

 

 

© 2018 Asik Blog

Theme by Anders NorenUp ↑