Using enter to submit a input field in React?

Question

Edit: It's working on enter of submit, but not letting me input characters

I'm not sure why I am getting an error saying Cannot read property 'onKeyPressHandler' of undefined

React, and Nextjs, Socket.io, and Express are some of the things I am using.

I am trying to have so whenever you hit enter a chat message will be sent but I am getting that error, and I am not too sure why.

Sorry this is probably a super simple question, It's just super late so my brain is a little tired ha!

This is the file that the input logic is in chat.js :

    import React from "react";
import styled from "styled-components";
import Sidebar from "../components/Sidebar";
import UserMessage from "../components/UserMessage";

import { Store, CTX } from '../components/Store'

const ChatBox = (props) => {
  const [textValue, changeTextValue] = React.useState('');

  const { allChats } = React.useContext(CTX);


  console.log(allChats)

  const onKeyPressHandler = (e) => {
    if (e.key === 'Enter') {
      sendChatAction(textValue)
      changeTextValue('')
    }
  }

  return (

    <Layout>
      <Sidebar />
      <Wrapper>

        <InnerBoxWrapper>

          <InnerBox>
            <UserMessage />
            <input label="Send a chat" value={textValue} onKeyPress={onKeyPressHandler} />
          </InnerBox>

        </InnerBoxWrapper>

      </Wrapper>
    </Layout>
  )
}
export default (props) => <Store><ChatBox {...props} /></Store>

Here I'll also show the store just in-case for some reason the context is causing it?

Store.js -

    import React from 'react'
import io from 'socket.io-client'
export const CTX = React.createContext();

const initState = {
    general: [
        { from: 'user1', msg: 'hello' },
        { from: 'user2', msg: 'u stink' },
        { from: 'user3', msg: 'some other words' }
    ],
    channel2: [
        { from: 'user1', msg: 'hello' }
    ]
}
const reducer = (state, action) => {
    const { from, msg, channel } = action.payload;
    switch (action.type) {
        case 'RECEIVE_MESSAGE':
            return {
                ...state,
                [channel]: [
                    ...state[channel],
                    { from, msg }
                ]
            }
        default:
            return state
    }
}

const sendChatAction = (dispatch, socket) => {
    socket.emit('chat message', value);
}

let socket;

export const Store = (props) => {

    if (!socket) {
        socket = io(':3001')
    }

    const [allChats, dispatch] = React.useReducer(reducer, initState)

    return (
        <CTX.Provider value={{ allChats, sendChatAction }}>
            {props.children}
        </CTX.Provider>
    )
}

Functional components are instanceless, i.e. no this, so use onKeyPress={onKeyPressHandler} — Drew Reese
– Drew Reese, Commented Apr 26, 2020 at 7:59
@DrewReese Wow... thanks, I have the problem now tho where I can't see text in the input box ? — Blue
– Blue, Commented Apr 26, 2020 at 8:01

Drew Reese · Accepted Answer · 2020-04-26 08:27:26Z

1

Add an onChange handler

const onChangeHandler = e => {
  changeTextValue(e.target.value);
}
...

return (
  ...
  <input
    label="Send a chat"
    onChange={onChangeHandler}
    value={textValue}
    onKeyPress={onKeyPressHandler}
  />
  ...
);

NOTE: Semantically it is more correct to use a form and submit mechanics, but this is outside the scope of your question.

edited Apr 26, 2020 at 8:27

answered Apr 26, 2020 at 8:21

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

Comments

gautamits · Accepted Answer · 2020-04-26 08:21:34Z

0

You can also use a form with onSubmit event

<form onSubmit={handleSubmit}>
  <input label="Send a chat" value={textValue} />
  <button type="submit"/>
</form>

answered Apr 26, 2020 at 8:21

gautamits

1,3029 silver badges11 bronze badges

Collectives™ on Stack Overflow

Using enter to submit a input field in React?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related