How to share the state and methods between components. By now everyone learned, use composition rather than inheritance. However, for some things and especially for developers new to the functional , it can be unclear how to use the composition properly. programming One common problem is how to the state and shared methods between components. reuse I’ll give an example with a List. The List definition is bellow, it has basic stuff such as , , methods and in the state. It expects in the and of course a list is rendered on the end. nextItem() prevItem() onChange(selectedItem) selectedItem items props List Component {constructor(props) { (props); . = { : 0,}} class extends super this state selectedItem componentWillUpdate({onChange, items}, nextState) { (onChange && nextState. !== . . ) {onChange(items[nextState. ]);}} if selectedItem this state selectedItem selectedItem nextItem() { { } = . ; {items} = . ; const selectedItem this state const this props **if** (items.length === **selectedItem** \+ 1) {  
  **return**;  
}  

**this**.setState({**selectedItem**: **selectedItem** \+ 1}); } prevItem() { { } = . ; const selectedItem this state **if** (**selectedItem** \=== 0) {  
  **return**;  
}  

**this**.setState({**selectedItem**: **selectedItem** \- 1}); } render() { {items} = . ; { } = . ; const this props const selectedItem this state **return** (  
  <**ul**\>  
    {  
      items.map((item, index) => (  
        <**li className=**{**\`**${**selectedItem** \=== index ? **'selected'** : **''**}**\`**}>  
          {item}  
        </**li**\>  
      ))  
    }  
  </**ul**\>  
); }} Now when we have a nice and clean List here is a question. Q: How to create ListVertical and ListHorizontal? With a (High Order Component), the HOC. So basically, what we are going to do is to separate and pass down stuff we need to the wrapped component. Watch. HOC withList (WrappedComponent) { Component {constructor(props) { (props); . = { : 0,}} function withList return class extends super this state selectedIndex componentWillUpdate({onChange, items}, nextState) {  
  **if** (onChange && nextState.**selectedIndex** !== **this**.**state**.**selectedIndex**) {  
    onChange(items\[nextState.**selectedIndex**\]);  
  }  
}  

_nextItem_ \= () => {  
  **const** {selectedIndex} = **this**.**state**;  
  **const** {items} = **this**.**props**;  

  **if** (items.**length** \=== selectedIndex + 1) {  
    **return**;  
  }  

  **this**.setState({**selectedIndex**: selectedIndex + 1});  
};  

_prevItem_ \= () => {  
  **const** {selectedIndex} = **this**.**state**;  

  **if** (selectedIndex === 0) {  
    **return**;  
  }  

  **this**.setState({**selectedIndex**: selectedIndex - 1});  
};  

_selectItem_ \= (selectedIndex) => {  
  **this**.setState({selectedIndex});  
};  

render() {  
  **const** {selectedIndex} = **this**.**state**;  

  **return** (  
    <**WrappedComponent**          {...**this**.**props**}  
      **prevItem=**{**this**._prevItem_}  
      **nextItem=**{**this**._nextItem_}  
      **selectItem=**{**this**._selectItem_}  
      **selectedIndex=**{selectedIndex}  
    />  
  );  
} }} As you can see, the wrapped component will have all the methods and the available. Instead using it from it is used from the . Much better! selectedIndex this props It is important for the wrapped component to have ability to change used parent state. That way you get to keep the lifecycle and can create new methods for updating state. This means to fully reuse the state. is additionally implemented so that the wrapped component can change the like it is a part of its state. That’s !important. Notice _selectItem_ _selectedIndex_ Lets check how ListHorizontal looks. ListHorizontal Component { = () => { {selectedIndex, selectItem} = . ;selectItem(selectedIndex + 1);} class extends customNextItem // Not really custom -_- const this props render() { {selectedIndex, prevItem, selectItem} = . ; (< >< />< >Selected item index: {selectedIndex}</ >< {prevItem}>Prev item</ >< { . }>Next item</ ></ >);}} const this props return div img src="https://imgflip.com/s/meme/Troll-Face.jpg" alt="Horizontal list" div div span onClick= span span onClick= this customNextItem span div That’s it! Simple and clean. Everything is implemented in the HOC and it can now be easily applied to any component. The most beautiful thing about HOC is that you can wrap as much as you like! withList Homework: How does now the List looks? Observations and in-advance comments: I find approach with HOC much more flexible than using Container 👎 I know horizontal and vertical list can be done with CSS 😒 Code above hasn’t been run 😱 Don’t make me write an example with extending the List 😝 Downside is working with the 😭 ref All read. Woohoo!

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React — Reusable component state

Too Long; Didn't Read

Company Mentioned

Luka Bracanovic

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React — Reusable component state

Too Long; Didn't Read

Company Mentioned

Luka Bracanovic

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES