How to do onChange with React Numeric Input

Question

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;

Domino987 · Accepted Answer · 2021-07-21 16:34:22Z

2

The value will always be of type string.

So you need to cast it as a number.

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

answered Jul 21, 2021 at 16:34

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Laspeed Over a year ago

It's still crashing with the error " Cannot read property 'value' of undefined "

edhi.uchiha · Accepted Answer · 2021-07-21 16:41:03Z

0

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

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

answered Jul 21, 2021 at 16:41

edhi.uchiha

3742 silver badges9 bronze badges

Comments

Said Louham · Accepted Answer · 2024-06-13 13:38:59Z

0

it works for me lik this :

onChange={setQty}

answered Jun 13, 2024 at 13:38

Said Louham

11 bronze badge

Collectives™ on Stack Overflow

How to do onChange with React Numeric Input

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related