Unable to type in input field after adding onChange in ReactJS

Question

I'm creating a ReactJS chatting application. If a user start typing in a message then I want that another user should get a message saying username is typing. So for this I'm using onChange but whatever a user is typing in is not coming in the input textbox.

Message.js file

const socket = io('localhost:9000');

class Message extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "",
      messages: "",
      typing: "",
    }
    this.sendMessage = this.sendMessage.bind(this);
    this.onTyping = this.onTyping.bind(this);
  }

  sendMessage(message) {
    console.log(this.state.data, "=============>state dataa")
    const data = {
      message,
      senderId: this.props.userId,
      roomId: this.state.data.roomId
    };
    console.log('Inside New message', data);
    socket.emit('new message', data );
  }

  onTyping(typing) {
    console.log(this.state.typing, "=====Typing Message====");
  }

  render() {
    const { messages, userId, chatDetails } = this.props;
    console.log('Chat in container : ', messages.toJS());

    return (
      <div className="message">
        { !chatDetails && <h1 style={{ textAlign: 'center' }}>Initiate a New Chat.</h1> }
        { chatDetails && <MessageList messages={this.state.message} user={userId} /> }
        { chatDetails && <MessageBar send={this.sendMessage} typingMessage={this.onTyping}/> }
      </div>
    );
  }
}

const mapStateToProps = state => ({
  messages: state.get('messages'),
  userId: state.getIn(['profile', 'id']),
  chatDetails: state.getIn(['videocall', 'callerDetails'])
});

const mapDispatchToProps = dispatch => ({
  saveMessage: payload => dispatch(saveMessage(payload)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Message);

MessageBar.js

class MessageBar extends Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
    this.sendMessage = this.sendMessage.bind(this);
    this.onTyping = this.onTyping.bind(this);
  }

  onTyping(e) {
    this.setState({typing: e.target.value});
    this.props.typingMessage(this.state.typing);
  }

  sendMessage(e) {
    this.setState({message: ''});
    this.props.send(this.state.message);
  }


  render() {
    return (
      <div className="message-bar">
        <input
          value={this.state.message}
          type="text"
          onChange={this.onTyping}
          placeholder="Type your message ..."
        />
        <button onClick={this.sendMessage}>
          <i className="fa fa-paper-plane" />
        </button>
      </div>
    );
  }
}

export default MessageBar;

I'm using socket.io and reactjs for this chatting application Can anyone please help me out with this.

Sivadass N · Accepted Answer · 2017-09-05 09:34:06Z

1

I think you have to update the state of message instead of typing during onTyping function.

onTyping(e) {
 this.setState({message: e.target.value});
 this.props.typingMessage(this.state.typing);
}

answered Sep 5, 2017 at 9:34

Sivadass N

9274 gold badges12 silver badges23 bronze badges

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

Comments

bennygenel · Accepted Answer · 2017-09-05 09:40:21Z

setState is asynchronous so you need to wait state to set before sending it to the prop.

class MessageBar extends Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
    this.sendMessage = this.sendMessage.bind(this);
    this.onTyping = this.onTyping.bind(this);
  }

  onTyping(e) {
    // here wait for state to set
    this.setState({typing: e.target.value}, () => {
        this.props.typingMessage(this.state.typing);
    });
  }

  sendMessage(e) {
    this.setState({message: ''});
    this.props.send(this.state.message);
  }


  render() {
    return (
      <div className="message-bar">
        <input
          value={this.state.message}
          type="text"
          onChange={this.onTyping}
          placeholder="Type your message ..."
        />
        <button onClick={this.sendMessage}>
          <i className="fa fa-paper-plane" />
        </button>
      </div>
    );
  }
}

export default MessageBar;

Collectives™ on Stack Overflow

Unable to type in input field after adding onChange in ReactJS

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