Problem with event.target.value in react getting 11 not 1+1

Question

I am trying to display a series of cards (components) that each carry a number that increments each time a new component is created. The problem is that instead of adding the value is concatenating and I don't really know how to solve it because I'm a bit new to react. I have tried to use valueAsNumber or parseInt() but either it doesn't let me or it doesn't work.

Here is my code:

import React, { useState } from 'react'

import {
  CCol,
  CRow,
  CContainer,
  CButton,
  CCard,
  CCardBody,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilArrowCircleRight } from '@coreui/icons'
import { TableCard } from '../../components'


const Tables1 = () => {

  const [tableID, setTableID] = useState(1);
  const [tablesList, setTablesList] = useState([]);

  const handleChangeID = event => {
    setTableID(event.target.value);
  };

  const handleClick = event => {
    setTablesList([...tablesList, {tableID : tableID}]);
    console.log("Before: " + event.target.value )
    setTableID( event.target.value += 1 );
    console.log("After: " + event.target.value)  
  };
  return (
    <>
    <CContainer fluid>
      <CRow className="mb-4" xs={{ cols: 1 }} sm={{ cols: 2 }} md={{ cols: 2 }} xl={{ cols: 4 }}>
        {tablesList.map((id,index) => {
          return (<CCol key={index} className="mb-4">
          <CCard  className="text-center" style={{ width: '18rem' }}>
              <CCardBody>
                  <h2 className="card-title">{id.tableID}</h2>
                  <h5 className="card-title">Table</h5>
                  <div className="d-grid gap-2">
                      {/* <CButton onClick={sendLocation(value+"")}>Send <CIcon icon={cilArrowCircleRight}  /> */}
                      <CButton onClick={() => console.log('Mesa'+id.tableID)}>Send <CIcon icon={cilArrowCircleRight}  />
                      </CButton>
                  </div>
              </CCardBody>
          </CCard>
          </CCol>)
        })}
      </CRow>
    </CContainer>
    <CButton onClick={handleClick}>Add Table</CButton>
    </>
  )
}

export default Tables1

And an image:

The problem

Jatin Parmar · Accepted Answer · 2022-04-17 17:21:29Z

1

before addition you first need to convert values into numbers ,so correct way to do this is like

const handleClick = event => {
setTablesList([...tablesList, {tableID : tableID}]);
console.log("Before: " + event.target.value )
event.target.value=(+event.target.value)+1
setTableID( (event.target.value );
console.log("After: " + event.target.value)  
};

answered Apr 17, 2022 at 17:21

Jatin Parmar

2,9596 gold badges22 silver badges34 bronze badges

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

2 Comments

SERGIO GARCÍA GONZÁLEZ Over a year ago

Thank you very much because I couldn't find the answer. Can I ask you another question? When I press the button two cards come out with the same initial value, it's probably a silly thing that I don't see but I don't know why it happens.

Jatin Parmar Over a year ago

its because you are initially assign value 1 like this const [tableID, setTableID] = useState(1);,which is never going to changed so all cards will have same tableID,1.you need to use some random value or you can use last tableId +1 as a next id

Barry Michael Doyle · Accepted Answer · 2022-04-17 17:20:49Z

1

The problem is you event.target.value is a string. If you say "1" + 1 you will get 11.

You'll need to convert the value to a number first before trying to do Math on it.

Doing Number(strNumber) will convert a string value to a number if the string is a valid number.

In you're specific use case here all you'd need to do is change the handleClick function to this:

const handleClick = event => {
  const value = Number(event.target.value); // converts string value to number
  if (isNaN(value)) return; // stops if value is not a number

  const newId = value + 1; // gets new ID based off the current number value
  setTablesList([...tablesList, { tableID : newId }]);
  setTableID(newId); 
};

edited Apr 17, 2022 at 17:20

answered Apr 17, 2022 at 17:12

Barry Michael Doyle

10.8k33 gold badges98 silver badges161 bronze badges

4 Comments

Barry Michael Doyle Over a year ago

It's a pleasure, one of the problems with the ID approach you're taking at the moment is if you've got 2 cards and you add after the second one you'll end up with 3 cards but 2 of them will have the same ID, so you might need to do something different with how you implement all this.

SERGIO GARCÍA GONZÁLEZ Over a year ago

Yeah, i am trying to do something to modify that but i dont get nothing. Sorry for my english i am spanish.

Barry Michael Doyle Over a year ago

It's all good :) One quick option (if you don't plan on deleting tables) is to set the new ID to be the tableList length + 1 (then you don't even need the event value). Usually it's better to just generate unique ids (use the uuid npm package) when it comes to id's instead of making it based on the position of the list item.

SERGIO GARCÍA GONZÁLEZ Over a year ago

I'm thinking about eliminating them later, so I have to give it some more thought.

Collectives™ on Stack Overflow

Problem with event.target.value in react getting 11 not 1+1

2 Answers 2

2 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Related