I need to handle different inputs onChange methods with one handler

Question

I am doing a component which does a littble bit of web scraping, my issue is that I want the user to type the city and the category they are looking for and pass thos parameters to the uri and get a response back depending on it. My issue is that I have done as many times before the handleChange function for all the inpunts but when I type on any of them it does not let me type, the inputs stay blank... I have checked and comapre to other components which are working and I do not see the error,

Here is the component Profesionals.jsx:

class Profesionals extends PureComponent {
  constructor() {
    super();

    this.state = {
      companyNames: [],
      telephones: [],
      category: "",
      city: "",
      isSearched: false
    };
  }

  handleChange(e) {
    const value = e.target.value;
    this.setState({
      ...this.state,
      [e.target.name]: value
    });
    console.log(this.state);
  }

  render() {
    const { isSearched, companyNames, telephones, city, category } = this.state;
    return (
      <div className="offset-2  col-4">
        <div class="form-group">
          <label class="col-form-label">Ciudad:</label>
          <input
            type="text"
            class="form-control"
            value={city}
            name="city"
            onchange={this.handleChange}
          ></input>
          <label class="col-form-label">Categoria:</label>
          <input
            type="text"
            class="form-control"
            value={category}
            name="category"
            onChange={this.handleChange}
          ></input>

          <button
            type="button"
            class="btn btn-secondary mt-2"
            onclikc={this.init}
          >
            Enviar
          </button>
        </div>

        {isSearched && (
          <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">Company Name</th>
                <th scope="col">Telephone</th>
              </tr>
            </thead>
            {companyNames.map((name, index) => (
              <tbody>
                <tr class="table-active" key={index}>
                  <td>{name}</td>
                  <td>{telephones[index]}</td>
                </tr>
              </tbody>
            ))}
          </table>
        )}
      </div>
    );
  }
}

export default Profesionals;

and this is the output I am getting in the console:

Profesionals.js:61 Uncaught TypeError: Cannot read property 'setState' of undefined
    at handleChange (Profesionals.js:61)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
    at executeDispatch (react-dom.development.js:584)
    at executeDispatchesInOrder (react-dom.development.js:609)
    at executeDispatchesAndRelease (react-dom.development.js:713)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:722)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (react-dom.development.js:692)
    at runEventsInBatch (react-dom.development.js:739)
    at runExtractedPluginEventsInBatch (react-dom.development.js:880)
    at handleTopLevel (react-dom.development.js:5803)
    at batchedEventUpdates$1 (react-dom.development.js:24401)
    at batchedEventUpdates (react-dom.development.js:1415)
    at dispatchEventForPluginEventSystem (react-dom.development.js:5894)
    at attemptToDispatchEvent (react-dom.development.js:6010)
    at dispatchEvent (react-dom.development.js:5914)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at discreteUpdates$1 (react-dom.development.js:24417)
    at discreteUpdates (react-dom.development.js:1438)
    at dispatchDiscreteEvent (react-dom.development.js:5881)

Answer 1

your inputs don't have a name attribute, so in the handleChange function [e.target.name] is always undefined

Answer 2

You should set name prop to the <input> elements. That's how your setState can work with multiple elements.

this.setState({
  [e.target.name]: e.target.value, // name equals DOM name attribute
});