Keyboard events onKeyPress on react js

Question

 const CarForm = () => { const data = useContext(userContext) const [showForm, setShowForm] = useState(false); const update = () => { db.collection("prospects").doc(data.document).update({ plates: carData.plates, motorNumber: carData.motorNumber, serialNumber: carData.serialNumber }) .then(function() { console.log(`Document successfully updated!`); }) .catch(function(error) { // The document probably doesn't exist. console.error("Error updating document: ", error); }); } const [plates, setPlates] = useState(); const [enteredPlates, setEnteredPlates] = useState(); const [found, setFound] = useState(); const [carData, setCarData] = useState(); const getPlates = () => { let plates = db.collection('plates'); plates.onSnapshot((querySnapshot) => { const docs = []; querySnapshot.forEach((doc) => { docs.push({...doc.data(), id: doc.id}) }); setPlates(docs); }); } useEffect(() => { getPlates(); }, []) const findPlates = (e) => { e.preventDefault(); if(plates.find(p => p.plates === enteredPlates)) { const x = plates.find(p => p.plates === enteredPlates) setCarData({...carData, plates: x.plates, motorNumber: x.motorNumber, serialNumber: x.serialNumber}) setFound(true) } else { setCarData({...carData, plates: enteredPlates}) setFound(false); } setShowForm(true) } const handleEvent = (event) => { if(event.keyCode === 13) { event.preventDefault(); setEnteredPlates(event.target.value); findPlates() } } return ( <> { plates ? <div className='Container'> <form className='data-form'> <label htmlFor='placa'>Número de placa</label> <div style={style.cont}> <input type='text' name='placa' id='placas' onKeyPress={handleEvent}/> <i className="fa fa-search" onClick={findPlates} style={style.icon}></i> </div> {showForm === true && <> { found === true ? <> <label htmlFor='serie'>Número de serie</label> <input type='text' name='serie' value={carData.serialNumber}/> <label htmlFor='motor'>Número de motor</label> <input type='text' name='motor' value={carData.motorNumber}/> </> : <> <label htmlFor='serie'>Número de serie</label> <input type='text' name='serie' onChange={e=> setCarData({...carData, serialNumber: e.target.value})}/> <label htmlFor='motor'>Número de motor</label> <input type='text' name='motor' onChange={e=> setCarData({...carData, motorNumber: e.target.value})}/> </> } </> } </form> {showForm === true && <GeneralButton text='Continuar' route='/datos-personales' back='/planes' click={update}/> } </div> : <Loading /> } </> ); } export default CarForm;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I have a problem with my code. I'm trying to fire a function when the user press enter in an 'input' type=text, that set the input value in a state and then execute a function that search the entered value in an object. Until now my code doesn't work, i don't get what i'm doing wrong, could somebody help me please? thanks a lot for your help

this is my function

const handleEvent = (event) => {
        if(event.keyCode === 13) {
            event.preventDefault();
            setEnteredPlates(event.target.value);
            findPlates()
        }
    }

and this is the input

<input type='text' name='placa' id='placas' onKeyPress={handleEvent}/>

this is the other function that is called from the handler:

    const findPlates = (e) => {
        e.preventDefault();
        if(plates.find(p => p.plates === enteredPlates)) {
            const x = plates.find(p => p.plates === enteredPlates)
            setCarData({...carData, plates: x.plates, motorNumber: x.motorNumber, serialNumber: x.serialNumber})
            setFound(true)
        } else {
            setCarData({...carData, plates: enteredPlates})
            setFound(false);
        }
        setShowForm(true)
    }

and this is all the return part:

return ( 
        <>
        {
            plates ? 
            <div className='Container'>
            <form className='data-form'>
                <label htmlFor='placa'>Número de placa</label>
                <div style={style.cont}>
                    <input type='text' name='placa' id='placas' onKeyPress={handleEvent}/>
                    <i className="fa fa-search" onClick={findPlates} style={style.icon}></i>
                </div>
                {showForm === true &&
                  <>
                  {
                    found === true ? 
                    <>
                        <label htmlFor='serie'>Número de serie</label>
                        <input type='text' name='serie' value={carData.serialNumber}/>
                        <label htmlFor='motor'>Número de motor</label>
                        <input type='text' name='motor' value={carData.motorNumber}/>
                    </>
                    :
                    <>
                        <label htmlFor='serie'>Número de serie</label>
                        <input type='text' name='serie' onChange={e=> setCarData({...carData, serialNumber: e.target.value})}/>
                        <label htmlFor='motor'>Número de motor</label>
                        <input type='text' name='motor' onChange={e=> setCarData({...carData, motorNumber: e.target.value})}/>
                    </>
                }
                  </>
                }
            </form>
            {showForm === true &&
              <GeneralButton text='Continuar' route='/datos-personales' back='/planes' click={update}/>
            }
        </div>
        : <Loading />
    }
        </>
     );

Answer 1

Try this:

const handleEvent = (event) => {
    if(event.key === 'Enter') {
        event.preventDefault();
        setEnteredPlates(event.target.value);
        findPlates()
    }
}