Deleting an element in the array when clicking and only accepting numeric type in input tags? [React-CodePudding

I'm new to front-end and now still learning things of this. I have 2 struggles that need your helps, but first I need to show the code :

import React, {useState, useRef, useMemo} from 'react'

function Content() {
   const [name, setName] = useState('')
   const [price, setPrice] = useState('')
   const [products, setProducts] = useState([])
const ref = useRef()
const handleSubmit = () => {
    setProducts([...products, {
        name,
        price: Number(price)
    }])
    setName('')
    setPrice('')
    ref.current.focus()
}

const total = useMemo(() => {
    console.log('Calculating..')
    const calculator = products.reduce((init, currentValue) => {
        return init   currentValue.price
    }, 0)
    return calculator;
}, [products])

return (
    <div style={{padding: '10px 32px'}}>
       <input
            ref={ref}
            value={name}
            placeholder={'Enter name..'}
            onChange={e => setName(e.target.value)}
       />
       <br />
       <input
            value={price}
            placeholder={'Enter price..'}
            onChange={e => setPrice(e.target.value)}
       />
       <br />
       <button 
            children={'Add'}
            onClick={handleSubmit}
       />
       <h3>Total :{total}</h3>
       <ul>
           {products.map((product, index) => (
               <li key={index}>
                   {product.name} - {product.price} 
                    <span className={'delete'} data-index={index}> đồng x</span>
               </li>
           ))}
       </ul>
    </div>
)
}

export default Content;

So I'm doing a small app so-called calculator, in the 2nd input tag, I don't know how to make it only numbers accepted, and how to press into span tag, specifically pressing the 'x', it has to be removed.

Please help me, thank you all!

CodePudding user response：

If I get it right, you want to make second input to accept only numbers? Than you can change the input type to number or you can write a custom pattern

And you also want to make span clickable? You can set onClick event to any(?) html tag and make it clickable

Here is an example with a span

<span 
    className={'delete'} 
    data-index={index}
    onClick={(e)=>{removeThisItem(e)}
> 
    đồng x
</span>

CodePudding user response：

For the 2nd input , you can add type="number in the second input tag.

    <input
        type="number"
        value={price}
        placeholder={'Enter price..'}
        onChange={e => setPrice(e.target.value)}
    />

For deleting the specific product, you can use filter function to filter the products array.

<span className={'delete'} data-index={index} ><button onClick={() => handleDelete(index)} đồng x</button></span>

And then use filter in handleDelete(index);