One-Way Data Flow in React With Example

In the last article, we have seen what are Hooks in React. In this, we are going to see what is One-way Data Flow in React. It is also called as flowing data or state from Parent component to child components.

Let’s see how to achieve One-way data flow using React.

One-Way Data Flow in React



Step 1: Setup React Application Using create-react-app

After setting up make sure that below files are available in a directory structure.



Step 2: Create a Button Component in App.Js

Write the following code in App.Js

 
function Button(props) {
  return (
  
  )
}



In the above code, we are creating a Button component which is handling click event which increments the value by one. In that, On the button onClick event we are referencing function passed inside props from Parent Component. It will give us a clear idea as we see further code.

Step 3: Create a Display Component in App.Js

Write the following code in App.Js

 
function Display(props) {
  return (
  
{props.message}
); }



In the above code, we have created a Display component which is only responsible for displaying message comes from props. This Props is also coming from the parent component. As we are going to write code for parent component now, things will get a much clearer view.

Step 4: Create an App Component (Parent) in App.Js

Write the following code in App.Js

 
function App() {
  const [count, setCount] = React.useState(0);
  const incrementCount= () => setCount(count+1);
  return (
    
); } export default App;



As you can see in the above code, App is the parent component. In the return part of the App component, you can see both Button and Display components. So this means that App is their parent component.

Now we have declared both const in the App component. Because state only can be accessed within that component. As Button and Display are part of the App, they can access the state of the parent component.

Button has an attribute of onclickFucntion which is holding increment count event which then accesses by Button component from props.

Note: Props is just a naming convention used to pass state as a parameter. you can use any name.

Similarly, Display component message attribute holding count field which then use by Display component to show message value.

Step 5: Make changes in index.js

 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(, document.getElementById('root'));

serviceWorker.unregister();



Save all changes. Come to the terminal window. Type npm start command and hit Enter. Click on +1 button to see whether it is incrementing value or not. If you have any doubt please mention that in comments below.

Admin

Tutorial Funda will keep you updated with the latest Programming Languages, Software Tools and related technologies used in Software Development.

Leave a Reply

Your email address will not be published. Required fields are marked *