React functional component using the `useState` hook does not update onChange using ReactiveSearch

Question

I am trying to use the ReactiveSearch component library to build a basic search application, and need to use the components as controlled component (https://reactjs.org/docs/forms.html). For all of the other filters I am working with, this is no problem, and the app detects changes and updates accordingly. However, for this DateRange component, it won't work. My working hypothesis is that it has something to do with the state value being an object rather than an array, but I can't find evidence to support that yet.

I've also tried using a regular class component, with the same result.

Link to Sandbox: https://codesandbox.io/s/ecstatic-ride-bly6r?fontsize=14&hidenavigation=1&theme=dark

Basic code snippet with no other filters

import React, { useState } from "react";
import {
  ReactiveBase,
  ResultsList,
  DateRange,
  SelectedFilters
} from "@appbaseio/reactivesearch";

const App = props => {
  const [filterState, setFilterState] = useState({
    DateFilter: { start: new Date(), end: new Date() }
  });
  return (
    <div className="App">
      <ReactiveBase
        app="good-books-ds"
        credentials="nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d"
      >
        <DateRange
          value={filterState.DateFilter}
          onChange={value => {
            setFilterState({
              ...filterState,
              DateFilter: {
                start: value.start,
                end: value.end
              }
            });
          }}
          componentId="DateFilter"
          dataField="timestamp"
        />
        <SelectedFilters />
      </ReactiveBase>
    </div>
  );
};

export default App;

Ed Lucas · Answer 1 · 2020-02-26T17:05:16.097

1

Just changing value to defaultValue worked for me (https://codesandbox.io/s/jolly-spence-1o8bv).

    <DateRange
      defaultValue={filterState.DateFilter}
      onChange={value => {
        setFilterState({
          DateFilter: {
            start: value.start,
            end: value.end
          }
        });
      }}
      componentId="DateFilter"
      dataField="timestamp"
    />

I also removed the DateFilter spread in your setFilterState, since your previous state was being fully overwritten regardless.

edited Feb 26 '20 at 17:05

answered Feb 26 '20 at 16:57

Ed Lucas

5,955
4
30
42

I made a PR so that the library works with with the `value` prop, but I will try this as well and see if it works as a stopgap! Thank you! – mtgillin Feb 26 '20 at 20:14
So it looks like this doesn't work fully. Since there is no `value` prop, the component doesn't handle its state as a controlled component. I've demonstrated this in this sandbox (https://codesandbox.io/s/hungry-shamir-usomr). Clicking the button should update the state and the date filter should react accordingly, but since it has no value prop it fails to do so, and adding the value prop back causes the craziness that is happening now to keep happening. – mtgillin Feb 27 '20 at 17:07

score 0 · Answer 2 · answered Feb 28 '20 at 15:00

0

It turned out to be an underlying problem with how the ReactiveSearch library was comparing the dates, as well as not setting values properly. Will make a PR to fix it.

answered Feb 28 '20 at 15:00

mtgillin

71
2
7

React functional component using the `useState` hook does not update onChange using ReactiveSearch

2 Answers2