CODEWITHSUNDEEP
reactjs
Laspeed
Laspeed

Reputation: 1089

How to do onChange with React Numeric Input

I'm trying to use a spinbox in my code but whenever I try changing the values using onChange, the app crashes. I also tried using onValueChange but it's getting ignored and I don't know what the problem is:

item.js

import NumericInput from "react-numeric-input";
import { Row, Col, ListGroup } from "react-bootstrap";

function ItemScreen() {
 
  const [qty, setQty] = useState(1);

  return (
    <div>
      <h2 className="text-center mb-3">Order</h2>
      <hr></hr>
      <Row>
        <Col md={8}>
          <ListGroup variant="flush">
            <ListGroup.Item>
              <Row>
                  <Col>Apple</Col>
                <Col>
                  <NumericInput
                    min={1}
                    max={100}
                    onChange={(e) => setQty(e.target.value)}
                    value={qty}
                  />
                </Col>
                <Col>
                  500 x {qty} = {qty * 500}
                </Col>
              </Row>
            </ListGroup.Item>
          </ListGroup>
        </Col>
      </Row>
    </div>
  );
}

export default ItemScreen;

Upvotes: 1

Views: 3226

Answers (3)

Said Louham
Said Louham

Reputation: 1

it works for me lik this :

onChange={setQty}

Upvotes: 0

edhi.uchiha
edhi.uchiha

Reputation: 364

the NumericInput component event just return the numeric value so you can this I guess :

<NumericInput
   min={1}
   max={100}
   onChange={(value) => setQty(value)}
   />

Upvotes: 0

Domino987
Domino987

Reputation: 8774

The value will always be of type string.

So you need to cast it as a number.

onChange={(e) => setQty(Number(e.target.value))}

Upvotes: 2

Related Questions