mayooran mayooran - 1 year ago 103
Javascript Question

How to append text to text area created in React JS?

I have the following code which creates a text area.

interface IReceiverProps {
receivedMessage: string;
topic: string;

export default class Receiver extends React.Component<IReceiverProps, {}> {

render() {
var textAreaStyle = {
width: 1300,
height: 450,
border: '3px solid #cccccc',
padding: '5px',
fontFamily: 'Tahoma, sans-serif',
overflow: 'auto',
marginLeft: '10px'
return (
<textarea style={textAreaStyle} value={this.props.receivedMessage}/>


This received message is passed by another component. How can I append the receivedMessage one below another in this text area? Any help would be much appreciated.

Answer Source

Use a state called textMessage.

constructor(props) {
  this.state = {
    textMessage: props.receivedMessage

In componentWillReceiveProps, append to textMessage.

componentWillReceiveProps(nextProps) {
  if (nextProps.receivedMessage !== this.props.receivedMessage) {
      textMessage: `${this.state.textMessage}\n{nextProps.receivedMessage}`

Bind to textMessage.

<textarea style={textAreaStyle} value={this.state.textMessage} />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download