input filtering in reactjs

Question

I am working on e-commerce React/Redux project, I want to make functionality by which user can display the products according to price filter, I have made two input fields in which user can type min and max price value and can display the products which lie between the price range, the functionality is working onChange but not displaying the products between the range, it is displaying general products

can anyone help me to sort this issue, Thanks in advance, My code and screenshot is attached below

class PriceInput extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: props.values,
        };
        this.onValueChangeComplete = this.onValueChangeComplete.bind(this);
    }

    onValueChangeComplete() {
        const { onValueChange } = this.props;

        onValueChange(this.state.value);
    }


    render() {
        const { currencyCode, limits } = this.props;
        const { value } = this.state;
        const notChanged = _.isEqual(value, limits);

        return (
            <div className={styles.wrapper}>
              <div className={styles.inputWrapper}>
                  {I18n.getComponent(
                      (formattedValue) =>
                          <input
                              type="text"
                              name="min"
                              className={styles.textInput}
                              placeholder={formattedValue}
                          />,
                      'filter.price-range-min'
                  )}
                <span className={styles.between}>{I18n.getText('filter.price-aed', {}, 'To')}</span>
                  {I18n.getComponent(
                      (formattedValue) =>
                          <input
                              type="text"
                              name="max"
                              className={styles.textInput}
                              placeholder={formattedValue}
                              onChange={this.onValueChangeComplete}
                          />,
                      'filter.price-range-min'
                  )}
              </div>
            </div>
        );
    }
}

Component in which I have to used the price functionality

case 'price':
                            childComponent = (
                                <PriceInput values={facet.data}
                                    limits={facet.data}
                                    currencyCode={this.props.currency.code}
                                    onValueChange={(data) => this.onSearchChange(facet.code, data)}/>
                            );
                            break;

Something looks off. Maybe I'm misunderstanding something.. Your min input doesn't seem to have an onChange function. And you don't seem to use this.state.value as a value in your inputs. What does props.values look like? Is it an object? — jonahe
– jonahe, Commented Sep 7, 2017 at 22:49
can you please help me how to refactor code according to your knowledge @jonahe — wali
– wali, Commented Sep 7, 2017 at 22:51

jonahe · Accepted Answer · 2017-09-07 23:58:52Z

1

This is not really a fix (I don't think) but maybe it can bring you closer to a solution. I made some edits to your code and placed comments where I made changes.

class PriceInput extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            // NOTE: I don't know how props.values looks. maybe this is wrong
            min: props.values.min, 
            max: props.values.max
        };
        this.onValueChangeComplete = this.onValueChangeComplete.bind(this);
    }

    onValueChangeComplete(minOrMax, newValue) {
        const { onValueChange } = this.props;
        this.setState(
          {[minOrMax]: newValue}, // update the property "min" or "max" with the new value
          () => onValueChange(this.state) // when the state change is done, send both min and max to onValueChange 
         ); 
       // onValueChange(this.state.value);
    }


    render() {
            // not sure what "limits" are used for
        // maybe you want to use an input with type="number" and 
        // use the attributes "min" and "max" ? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
        const { currencyCode, limits } = this.props;
        const { min, max } = this.state; // this is new. 
        const notChanged = _.isEqual(value, limits);

        return (
            <div className={styles.wrapper}>
              <div className={styles.inputWrapper}>
                  {I18n.getComponent(
                      (formattedValue) =>
                          <input
                                                            value={ min } // this is new
                              type="text"
                              name="min"
                              className={styles.textInput}
                              placeholder={formattedValue}
                              onChange={ event => this.onValueChangeComplete('min', event.target.value) } // this was missing before
                          />,
                      'filter.price-range-min'
                  )}
                <span className={styles.between}>{I18n.getText('filter.price-aed', {}, 'To')}</span>
                  {I18n.getComponent(
                      (formattedValue) =>
                          <input
                                value={ max } // this is new
                              type="text"
                              name="max"
                              className={styles.textInput}
                              placeholder={formattedValue}
                              onChange={ event => this.onValueChangeComplete('max', event.target.value )}
                          />,
                      'filter.price-range-min'
                  )}
              </div>
            </div>
        );
    }
}

edited Sep 7, 2017 at 23:58

answered Sep 7, 2017 at 23:13

jonahe

5,0101 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

wali Over a year ago

Hey @jonahe, code is working fine but the issue is, the page start filtering the products as soon I types value in min(first input) , i wanted to achieve filtering when user types max value after the min value

jonahe Over a year ago

And what should happen if the user starts setting the max value, and then sets the min value? I think it could be confusing for the user. IF you need to limit when the filtering should happen, then maybe an extra button "Apply" or something could be used to trigger onValueChange(this.state);

jonahe Over a year ago

Sorry, made a lot of edits to that earlier comment. Done now.

wali Over a year ago

I have added screenshot, hope you can understand what will be the functionality,

jonahe Over a year ago

Ok, yeah that makes sense. I made a small change to onValueChangeComplete that may be enough.

|

Collectives™ on Stack Overflow

input filtering in reactjs

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related