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

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

CodePudding user response：

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)  
};

CodePudding user response：

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); 
};