CODEWITHSUNDEEP
javascriptreactjsreact-context
deepsun
deepsun

Reputation: 420

Share data between React components with no relation?

I'm working on a React component library that allows for client-side data filtering by passing an array of objects and an <input/> as props to a <SearchFilter/> component. I want to return the filtered results to a separate <SearchResults/> component that can be rendered elsewhere in the tree (i.e. the results component doesn't have to be a child of the input component).

I've got the filtering figured out, but I'm not sure the best route to take in React on getting the filtered data to the <SearchResults/> component.

This is what I'd like to end up with...

<SearchFilter
  data={data}
  input={<input type="text" value={value} onChange={this.handleChange}/>}
/>

Then, using Render Props to return the data and map over that to return JSX, there would be the results component. Something like this...

<SearchResults 
  render={data => (
    data.map(el => (
      <div>
       <span>{data.someProperty}</span>
      </div>
    )
  )}
/>

This is what I'd like to achieve because I want to allow for rendering the <SearchFilter/> component at one place in the tree, and allow the <SearchResults/> component to be rendered elsewhere, so that there's maximum flexibility in how the tree is composed and, therefore, how the view is rendered.

I've looked into the Context API, but it seems like that would require a handful more components to be a part of my library, which further complicates what I'm trying to achieve. If that's the only way around it, then that's fine, but I wanted to ask and see if anyone can think of another solution.

Thanks!

Upvotes: 0

Views: 4945

Answers (2)

Dave Cole
Dave Cole

Reputation: 2765

You could create a data store class that holds your filter, pass it in as a property to both components, and have your SearchFilter component change a value in that.

Upvotes: 0

Gerard van Helden
Gerard van Helden

Reputation: 1602

The bigger issue is that you will need to manage a state that is shared between components on a higher level, i.e., any component that will wrap these other two components, ultimately. With plain React, this state would be managed by the parent (or ancestor) component, passing down the relevant values as props. This opposed to the, usually bad, idea to have sibling components influence each other's state, since you well get into the "who's boss here"-problem.

The thing the Context API handles is not having to pass down props for things that typically don't change (or: typically shouldn't cause renders to trigger often).

A global state store, such as Redux, can help you modelling this, but in essence it's not much more than 'a' component managing state, and other components rendering according to that state. Events within the lower components trigger changes in the data, which will cause the state to change, which will cause the props of the children to change, which then will cause re-renders.

I'd advise you to try using this simple pattern:

class Search ... {
    state = {data: [], text: ""}

    render() {
        return (
            <div>
                <SearchFilter 
                    data={this.state.data} 
                    onSearch={() => this.fetchNewData()} 
                    onChange={(e) => this.setState({text: e.targetElement.value})}
                    text={this.state.text} 
                />
                <SearchResults data={this.state.data} />
            </div>
        );
    }

    fetchNewData() {
        fetch('/url?text=' + this.state.text)
            .then((newData) => { this.setState({data: newData}); })
    }
}

Something along these lines. If you have trouble modelling stuff like this, you can use Redux to force you to do it in a similar way, and avoid managing local state intermixing with global state (which is typically something that is hard to manage).

If you do this right, components that have no state (i.e., aren't responsible for managing state and thus have no event handlers) can all become pure components, i.e. stateless components, i.e. functions that return JSX based on props:

const SearchResults = ({data}) => <div>{data.map( () => <etc /> )}</div>

Upvotes: 2

Related Questions