Hide or minimise search facet component after making a selection

We're building a Reactivesearch solution and have a requirement to hide or minimise a facet (SingleList in this case) after a selection has been made.

I've already tried the below approach using a custom render function where I can inspect the if a value has been selected and apply conditional rendering:

    render: ({
        loading,
        error,
        data,
        handleChange,
        value
    }) => {
        if (value !== "") {
            return (
                <span>{value}</span>
            )
        }
        else {
            return (
                <ul>
                    {
                        data.map(item => (
                            <li>
                                <input
                                    type="radio"
                                    value={item.key}
                                    onChange={handleChange}
                                />
                                <span>
                                    <span>{item.key}</span>
                                    <span>{item.doc_count}</span>
                                </span>
                            </li>
                        ))
                    }
                </ul>
            )
        }
    }

Whilst this works, I wonder if there is a cleaner way, which also avoids the need to have a custom render of the list. Basically, a solution that uses the default render in the case of no facet selection.

I think this is the best approach that I think would work. Here are other ways how I may have done:

• Using state variable

Create a state variable and update the state whenever the value is selected. You can do this using onValueChange. Whenever this state change you can set the display none for the singlelist.

handleUpdate = (value) => {
  this.setState({
    value,
  })
}

render(){
  const { value } = this.state;

  return (
    <div>
      <SingleList onValueChange={this.handleUpdate} dataField={} style={value ? { display: 'none' } : { display: 'block'}} />
      {value ? <span>{value}</span> : null}
    </div>
  );
}

This is the other way you can follow. But the custom render method is the best way to go about this issue.

Hope this helps!