Unable To Type In React Input Field

Currently, the default value of my input field is 1. If I try to type something in the input field, nothing changes. interface Orders { order_graph_1: number; order_graph_2

Solution 1:

The problem is that you are using the value of order_graph_1 and order_graph_2 that you get from props but updating the ones that you have in state and not updating the ones in the props.

The code that you are converting updates both the state and the props (by calling this.props.setOrders). But it is totally unnecessary to have these variables in a component state of RegressionSetup at all since it can already access and update them through props.

The setOrders function which is passed down from the parentMain component is also a bit silly because both components have a state with properties order_graph_1 and order_graph_2 -- so why are we passing them as a tuple to setOrders?

In Main you can delete the setOrders function and instead pass down an arrow function that calls setState.

<RegressionSetup
  order_graph_1={this.state.order_graph_1}
  order_graph_2={this.state.order_graph_2}
  setOrders={(orders) => this.setState(orders)}
/>

setState in a class component takes a partial new state and merges it with the current state. That means the we don't even have to pass both orders to setOrders. We can call it with just one order and that's fine.

So we can define the props for our RegressionComponent like this:

exportinterfaceOrderGraphs {
  order_graph_1: number;
  order_graph_2: number;
}

interfacePropsextendsOrderGraphs {
  setOrders(graphs: Partial<OrderGraphs>): void;
}

There is no reason for it to be a class component, but it also doesn't matter. RegressionSetup does not need to use state, hooks, or lifecycle methods. It just takes props and returns JSX.

I still prefer to render the two inputs using a function since it's less repetition but obviously you don't have to do that. We use the variable property to get the correct property from props value={this.props[property]} and to set the correct key on the object that we pass to setOrders: onChange={(e) => this.props.setOrders({[property]: parseInt(e.target.value, 10)})}

classRegressionSetupextendsReact.Component<Props> {
  renderInput(property: keyof OrderGraphs, label: string) {
    return (
      <div className="col-6">
        <p className="text-center">{label}</p>
        <div className="w-100 d-flex justify-content-center">
          <input
            className="text-center"
            name={property}
            type="number"
            value={this.props[property]}
            onChange={(e) =>
              this.props.setOrders({ [property]: parseInt(e.target.value, 10) })
            }
            min="1"
            max="10"
            step="1"
          />
        </div>
      </div>
    );
  }

  render() {
    return (
      <div className="row">
        {this.renderInput("order_graph_1", "Order of first model: ")}
        {this.renderInput("order_graph_2", "Order of second model: ")}
      </div>
    );
  }
}

Code Sandbox Link

I messed with the other components as well. I added Props and State types for everything. I also used arrow functions to get rid of all the bind(this) calls. There are still a few Typescript errors related to the external packages (chart.js and mathjs).

Solution 2:

A React component only rerenders upon state change. You should therefore change the state accordingly to the value of the input field every time the value changes, and then simply load this state value in the input field.

Solution 3:

This is causing issue value={this.props.order_graph_1} The value here is derived from props instead of state. Ideally it should be populate using some state and onChange should update that state. Since after every rerender, the props won't change and the input value will still remain the same.

this.state.order_graph_1 should be the value for input field.