CODEWITHSUNDEEP
javascriptreactjsreact-select
JDLR
JDLR

Reputation: 600

react-select not resetting value on change of state

i have 2 select country inputs that i want to reset to default placeholder when resetting all the state inside a form. I am using 2 state variables to store the countries, i got a function that reset my state but select inputs does not reset to default. It stays selected on last country selected. I reset the state to null but i can't get it work. Can you please help me here?

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

    this.state = {
      moneda1: '',
      monto1: '',
      moneda1placeholder: 'Cantidad a enviar',
      moneda1disable: false,
      moneda2: '',
      monto2: '',
      moneda2placeholder: 'Cantidad a recibir',
      moneda2disable: false,
      pais1: null,
      pais2: null,
      disable: false

    };

    this.timeout = 0;

    this.moneda1Cambio = this.moneda1Cambio.bind(this);
    this.moneda2Cambio = this.moneda2Cambio.bind(this);

    this.baseState = this.state;
  }

  pais1Cambio = select => {
    let value = select.value;
    let value2 = prefijoMoneda(value);
    this.setState({
      pais1: value,
      moneda1: value2
    });
  };

  pais2Cambio = select => {
    let value = select.value;
    let value2 = prefijoMoneda(value);
    this.setState({
      pais2: value,
      moneda2: value2
    });
  };

  resetState = () => {
    this.setState(this.baseState);
    this.setState({
      pais1: null,
      pais2: null
    });
    ReactTooltip.hide();
  };

This is my select components, if i use value option on it, it crash and i cant change the country it remains on placeholder default message.

        <Select
          name="paisorigen"
          onChange={this.pais1Cambio}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais de origen"
          isDisabled={this.state.disable}
        />

        <Select
          name="paisdestino"
          onChange={this.pais2Cambio}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais destino"
          isDisabled={this.state.disable}
        />

UPDATE

Value option where crashing because it needs to receibe and object with value and label like this.

        <Select
          name="paisorigen"
          onChange={this.pais1Cambio}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais de origen"
          isDisabled={this.state.disable}
          value={{ value: this.pais1, label: labelPais(this.pais1) }}
        />

But now i got a problem because when i click some option. It stays in default value. This is the function that i am using onChange

  pais1Cambio = select => {
    let value = select.value;
    let value2 = prefijoMoneda(value);
    this.setState({
      pais1: value,
      moneda1: value2
    });
  };

Upvotes: 1

Views: 1428

Answers (3)

JorgeObregon
JorgeObregon

Reputation: 3320

There are a few things that caught my attention:

  1. When you do this.baseState = this.state; in constructor, you're not copying the state, just making a reference to it, so later when you update this.state you're also updating this.baseState. To copy it: this.baseState = Object.assign({}, this.state).

  2. Your resetState function has 2 calls to setState. Try combining them:

resetState = () => {
    this.setState({
       ...this.baseState,
       // There's no need to set pais1 and pais2 to null here since baseState already have them as null
       // pais1: null,
       // pais2: null   
    });

    // or simply...
    // this.setState(this.baseState)

    ReactTooltip.hide();
  };
  1. Try this and see if it helps debugging what's going on.
       <Select
          name="paisorigen"
          onChange={(e) => {
            console.log({e}) // and check your console to see what's coming back here
            this.setState({pais1: e.value})
          }}
          options={paises}
          className="paisSelectContainer"
          classNamePrefix="paisSelect"
          placeholder="Pais de origen"
          isDisabled={this.state.disable}
          value={this.state.pais1}
        />
    ```

Upvotes: 0

rzwnahmd
rzwnahmd

Reputation: 1082

Try passing value prop to your Select component like value={this.state.pais1}

Upvotes: 0

Arton Hoxha
Arton Hoxha

Reputation: 373

If you try to bind pais1Cambio and pais2Cambio in constructor does it work ?

Upvotes: 0

Related Questions