Data from one JSON file is overwriting another JSON dataset when trying to use react-select module in a form in React

Question

Good morning, I have created a new node module by duplicating react-select-country-list found here, https://www.npmjs.com/package/react-select-country-list and modifying the files to display US states instead of countries.

All is well with the new module except for when I go to implement it.

I am trying to build a contact page where users can enter a contact's address with US state(not required) and country.

When I do, the "country" data is overwritten by the "state" data and I do not know the way to differentiate between the countries module and the us states module within my jsx file.

Both country and state dropdowns show US states, the desired behavior is to show countries for the "country" dropdown and US states for the "state" dropdown.

I do not expect there to be any difference between the country dropdown and the state dropdown because I haven't done anything to differentiate between the two because I do not know how.

Will someone please explain to me how I can differentiate from the two modules in my jsx file? Or if there is another/better way to do this please let me know. I am new to React.

Here is my jsx component code:

import React from "react";
import Select from "react-select";
import countryList from "react-select-country-list";
import usstatesList from "react-select-usstates-list";

// reactstrap components
import {
  Card,
  CardHeader,
  CardBody,
  CardTitle,
  FormGroup,
  Form,
  Row,
  Col
} from "reactstrap";

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

    this.options = countryList().getData();

    this.options = usstatesList().getData();

    this.state = {
      options: this.options,
      value: null
    };
  }

  changeHandler = value => {
    this.setState({ value });
  };

  render() {
    return (
      <>
        <div className="content">
          <Row>
            <Col md="12">
              <Card className="card-user">
                <CardHeader>
                  <CardTitle tag="h5">Add Customer Info</CardTitle>
                </CardHeader>
                <CardBody>
                  <Form>
                    <Row>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>State</label>
                          <Select
                            options={this.state.options}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>Country</label>
                          <Select
                            options={this.state.options}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                  </Form>
                </CardBody>
              </Card>
            </Col>
          </Row>
          >
        </div>
      </>
    );
  }
}

export default AddNewContact;

Answer 1

You can solve your problem by renaming this.options to this.countryOptions for countries and to this.usStateOptions for US states. In this.state remove options property and use this.countryOptions and this.usStateOptions for your dropdowns. I hope this helps.

Your class should look like this:

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

    this.countryOptions = countryList().getData();

    this.usStateOptions = usstatesList().getData();

    this.state = {
      value: null
    };
  }

  changeHandler = value => {
    this.setState({ value });
  };

  render() {
    return (
      <>
        <div className="content">
          <Row>
            <Col md="12">
              <Card className="card-user">
                <CardHeader>
                  <CardTitle tag="h5">Add Customer Info</CardTitle>
                </CardHeader>
                <CardBody>
                  <Form>
                    <Row>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>State</label>
                          <Select
                            options={this.usStateOptions}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                      <Col className="pl-1" md="6">
                        <FormGroup>
                          <label>Country</label>
                          <Select
                            options={this.countryOptions}
                            value={this.state.value}
                            onChange={this.changeHandler}
                          />
                        </FormGroup>
                      </Col>
                    </Row>
                  </Form>
                </CardBody>
              </Card>
            </Col>
          </Row>
          >
        </div>
      </>
    );
  }
}