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/>
Type "help","12+34", "12+34*76" for more information</span>
<div id="terminalOutput"></div> >>> <input value={this.state.value} onKeyDown={this.keyPress} onChange={this.handleChange} id="terminalInput" ></input>
</div>
</div>
);
}
}
export default App;