How to append a div to another div when enter key is pressed

JavaScript
#1

How to append a div when the enter key is pressed with a line break to each in reactJS.
here is the code in reactjs. Please help me.

Thank you.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      commandHistory:[],
      value:'',

    }
    this.handleChange = this.handleChange.bind(this);
    this.keyPress = this.keyPress.bind(this);
  }
  handleChange(e) {
      this.setState({
        value: e.target.value
      });
  }
  keyPress(e){
    if(e.keyCode === 13){
      console.log(e.target.value);
      var newArray = this.state.commandHistory;
      newArray.push(e.target.value);
      //console.log(newArray);
      this.setState({
        commandHistory:newArray,
        value:''
      });

      var terminalOutput=document.getElementById('terminalOutput');
      terminalOutput.append(e.target.value+`\n`);
      //terminalOutput.append(``);
      console.log(terminalOutput);
      console.log(this.state.commandHistory);
    }
  }
  render() {
    return (
      <div className="Terminal">
        <div className="controls">
          <span className="red"></span><span className="yellow"></span><span className="green"></span>
        </div>
        <div className="Input-Terminal">
          <span className="machine-name">root@user:~ calc<br/>

          &nbsp;Type "help","12+34", "12+34*76" for more information</span>
          <div id="terminalOutput"></div>&nbsp;>>> &nbsp;<input value={this.state.value} onKeyDown={this.keyPress} onChange={this.handleChange}  id="terminalInput" ></input>
        </div>
      </div>



    );
  }
}

export default App;
#2

not exactly the new line character but this achieves the desired result

#3

@benjaminadk Thank you very much and I have tried in another way, this is the full working demo. Please have a look at and let me know any modification.

#4

cool man. i like the look. i would recommend a couple finishing touches. One is to make the about me and other long ones flex-wrap: wrap or something like that, because the response to about me was off the screen and i could not scroll over. i guess you could also put in a scroll bar. The other thing is this, and i just started using this in a chat project i am working on.
if you put an empty div or any element really at the bottom of the page you can use the built in api scrollToBottom() - so using a ref or document.getElementById, etc on that empty bottom element you can scroll to the bottom after every command - so the user does not have to manually scroll down every time.

class App extends ...

when command fires() {
       this.bottom.scrollToBottom()
}
....
<div<{old output}</div>
<div>{new output}</div>
<div ref={el => this.bottom  = ref}></div>

scrollToBottom can take true or false optionally as an argument, if it doesnt work empty try false, it has to do with how div is nested within - false worked for my use case
but yah these are just polish, good idea for a project.

#5

You could consolidate the following if and else statements:

        if(inputelement[0]=='s' && inputelement[1]=='i' && inputelement[2]=='n' && inputelement[3]=='(' && inputelement[inputelement.length-1]==')'){
          var result = inputelement.match(/\((.*)\)/);
          result=result[1];
          result=eval(result);
          result=Math.sin(result/180*Math.PI);
          inputelement=result;
          try{
            var answer=eval(inputelement);
          }
          catch(e){
            answer=inputelement+": Command not found"
          }
        }
        else if(inputelement[0]=='c' && inputelement[1]=='o' && inputelement[2]=='s'){
          var result = inputelement.match(/\((.*)\)/);
          result=result[1];
          result=eval(result);
          result=Math.cos(result/180*Math.PI);
          inputelement=result;
          try{
            var answer=eval(inputelement);
          }
          catch(e){
            answer=inputelement+": Command not found"
          }
        }

with the following if statement:

        var trigFunc = inputelement.match(/^(sin|cos)\((\d+)\)$/);
        if(trigFunc) {
          var [, funcName, val] = trigFunc;
          var toEvaluate = `Math.${funcName}(${val}/180*Math.PI)`;
          try{
            var answer = eval(toEvaluate);
          }
          catch(e){
            answer = inputelement+": Command not found"
          }
        }
1 Like
#6

@RandellDawson it worked, really a cool snippet. Thank you.

#7