How to make input working for certain values only, is there any way to change value to desired one?

Question

I am trying to implement functionality stated in topic of this post. Desired behaviour is to make my input working only for certain countries (for example, Finland).

Second part of my question is to make my input value "change" in order to fullfill external API entry (for example, Netherlands input value has to be NL in order to fetch cities, full country name does not work).

Is there any way to achieve my goals?

I was trying to manipulate with component state, but it does not work.

Code:

App.js

import React, { Component } from 'react';
import './App.css';

import axios from 'axios';

import CitySearchForm from './CitySearchForm/CitySearchForm';

class App extends Component {
 state = {
  country: '',
  error: false
}

getCities = (e) => {
 e.preventDefault();

 const countryName = e.target.elements.country.value;

 const url = `https://api.openaq.org/v1/cities? 
 country=${countryName}&order_by=count&sort=desc&limit=10`

axios.get(url)
.then( response => {
  console.log(response.data.results)
})
.catch(error => {
  console.log(error)
 })
}

render () {
 return (
  <div className="App">
    <CitySearchForm getCities = {this.getCities}/>
  </div>
  );
 }
}

export default App;

CitySearchForm.js

**Updated CitySearchForm.js**

import React, { Component } from 'react';

class CitySearchForm extends Component {
 state = {
  countryName: '',
  disabled: true
}

changeHandler(e) {
 this.setState({ countryName: e.target.value}, () => {
  if(this.state.countryName === 'Spain') {
    this.setState((prevState) => {
      return {disabled: !prevState.disabled}
    });
   }
 })
}


render () {
 const disabled = this.state.disabled;
 return (
  <div>
    <form onSubmit={this.props.getCities}>
      <input type="text" name="country" placeholder="Country" value={this.state.countryName} onChange={this.changeHandler.bind(this)}/>
      <input type="submit" disabled = {disabled} value="Submit"/>
    </form>
  </div>
  )
 }
}

export default CitySearchForm;

So i decided to disable my button whenever other word than Spain is value of countryName in my set (it refers to 'not working' of input). It works fine, but just to the moment i type in "Spain" - when i'm deleting 1 letter or even whole word, the submit button is still enabled.

Answer 1

Not sure what you mean by working but if you don't want your form to submit you can create some allowedCountries list and check before submitting.

getCities = e => {
  e.preventDefault();

  const countryName = e.target.elements.country.value.toLowerCase();

  if (
    !allowedCountries
      .map(country => country.toLowerCase())
      .includes(countryName)
  ) {
    // Your logic here
    return;
  }

  const countryCode = countryNameToCode[countryName];

  if (!countryCode) {
    // Error handling
    return;
  }

  const url = `https://api.openaq.org/v1/cities?country=${countryCode}&order_by=count&sort=desc&limit=10`;

  axios
    .get(url)
    .then(response => {
      console.log(response.data.results);
    })
    .catch(error => {
      console.log(error);
    });
};

As for changing the value you can use some key value object as well

const countryNameToCode = ['Sweden' => 'SE', 'Finland' => 'FN'];

And replace the value from your input with the one your API endpoint accepts.