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.



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


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()




React- Reusable modal component

We can create reusable modal component without importing additional library.

In this demo, We create a single component and passing the Modal Title and Contents through props from parent component. I use Bootstrap 4 for better UI.




React- Some important core concepts with example

Codebase to cover the following core concepts with simple program i.e To display quote message upon button click.

It helps to recall the react core concepts quickly.


Build react app in Nginx (Without Nodejs)