React.js: The one way and the opposite way data flow
Tags: react, javascript
Published: 2022-01-15 21:14:44

### Introduction
The one way and the opposite way data flow are two important concepts you need to understand as a react developer, also they are two interview questions that often ask.

### The one way data flow 
As you know in react we use state to store data in a  specific  component and if this component has children we pass the state from the parent component to the child component as props.
The concept of passing props is called **one way data flow** or **uni-directional data flow** because the props or data can only flow from the top to the bottom, means from the parent to the child. 

### The opposite way data flow 
The opposite way data flow is about passing props from child to parent.

When it comes to this concept, react doesn't provide us a shorthand syntax for handling opposite data flow.
That's because we can't pass props from a child component to a parent component, but we can implement it in our selves.

#### The opposite way data flow implementation
Let's start by creating a simple parent component contains : 
- A search state 
- A handle change function 
- A function to get the result of the search value from an API
- A button to call the function
```react
function Search() {
  const [search, setSearch] = useState('')

 //handle change
  const handleChange = e => setSearch(e.target.value)

 // get the result search from server
  const getTheSearchResult = () => {
    console.log(search)
  }
  
  return (
    <div className="App">
    <button onClick={getTheResultSearch}>Get the result</button>
    </div>
  );
}
```
The search input will exist in a separate component called **SearchInput**.

```react
export function SearchInput() {
  const [search, setSearch] = useState('')
  
  //handle change
  const handleChange = e => setSearch(e.target.value)
  return (
    <input type='text' value={search} 
           onChange={handleChange} />
  )
}
```
Combine the two components :
- Search      : the parent
- SearchInput : the child
```react
 <div className="App">
      <SearchInput/> <br/>
     <button onClick={getTheResultSearch}>Get the result</button>
 </div>
```
With tis implementation we will get nothing in the console when we click the button.
That's because when we type in the search input the search state that exists in the **SearchInput** component will change not the one that exists in the **Search** component.

Now we are stack because there is no way to pass the state exists in the child to the parent.

To handle this situation, we need to remove the state and the handleChange from the **SearchInput** and pass them as props from the **Serach** component.

##### Refactor the SearchInput component 

```react
export function SearchInput({search, handleChange}) {

  return (
    <input type='text' value={search} 
           onChange={handleChange} />
  )
}
```
##### Refactor the Search component

```react
<div className="App">
      <SearchInput search={search} onChange={handleChange}/>
     <button onClick={getTheResultSearch}>Get the result</button>
    </div>
```
##### Result 
![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/65e3xnpkr40aocutxnxl.gif)
Now, when we type in the search input, the value pass as props to the **Search** component via the **handleChange**.
It means that the data flows in the opposite way. 

### Conclusion
This is all about the one way and the opposite way data flow, I hope you enjoyed ❤️.