CODEWITHSUNDEEP
javascriptreactjs
Bargain23
Bargain23

Reputation: 1973

React - selected value is not displayed after refreshing page

So, I'm using react-select to let the user pick a choice from a list of options. It's supposed to update on-change. I've verified that the selected option is indeed being updated into the database, and the input is being recognized by React upon checking it in the React chrome tools. What's puzzling is how it doesn't get displayed after refreshing the page.

class ContractBasicForm extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      contractingEntity: props.contracting_entity
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      contractingEntity: nextProps.contracting_entity
    })
  }


  autoSetState = (newState) => {
    this.setState(newState)
    this.props.formSubmit()
  }

  render () {
    return(
      <div className="container-fluid">
        <section className="row ml-2 mr-2 mt-2">
          <article className="col-12 side-modal-form">
            <SelectInput
              header="Contracting Entity"
              name="contract[contracting_entity]"
              options={this.props.contracting_entity_opts}
              value={this.state.contracting_entity}
              userCanEdit={this.props.user_can_edit}
              multi={false}
              onChange={(e) => {
                this.autoSetState({contracting_entity: e.value})
              }}
              />
          </article>
        </section>
      </div>
    )
  }
}

I have another input called Stage which is very similar to ContractingEntity, but its value is displayed after refreshing the page:

<SelectInput
  header="Stage"
  name="contract[stage]"
  options={this.props.stage_opts}
  value={this.state.stage}
  userCanEdit={this.props.user_can_edit}
  multi={false}
  onChange={(e) => {
    this.autoSetState({stage: e.value})
  }}
  />

Upvotes: 0

Views: 1370

Answers (1)

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8122

React app state will be initialised on page refresh. You need to persist such data in localStorage if you want to keep it after page refresh. This is considered as anti-pattern in react and it is recommended not to use this unless it becomes necessity.

I hope this made things clear for you.

Upvotes: 1

Related Questions