Hide or minimise search facet component after making a selection

Question

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.

Answer 1

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!