Skip to content

First call to .log() can throw an exception? #8

@erantapaa

Description

@erantapaa

I've modified the simple echo demo to include a button which calls .log() with some text when pressed.

The app will throw an exception if the very first thing I do is press the button. If, however, I first enter some text (including a CR) the button works correctly.

The exception is:

TypeError: Cannot read property 'message' of undefined
default_1.log
C:/Users/Admin/Documents/Work/console-bug/node_modules/react-console-component/lib/react-console.js:151
  148 |     messages[_i - 0] = arguments[_i];
  149 | }
  150 | var log = _this.state.log;
> 151 | log[_this.state.log.length - 1].message.push({ value: messages });
  152 | _this.setState({
  153 |     log: log,
  154 | }, _this.scrollIfBottom());

Source for App.js (using react-console-component 0.6.1):

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Console from 'react-console-component'
import 'react-console-component/main.css'

class App extends Component {
  child: { console?: Console } = {}
  echo = (text) => {
    this.child.console.log(text)
    this.child.console.return()
  }
  click = () => {
    this.echo("I was clicked!!!")
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Console ref={ (r) => this.child.console = r}
                 handler={this.echo} autofocus={true} />
        <button onClick={this.click}>Click Me</button>
      </div>
    );
  }
}

export default App;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions