CODEWITHSUNDEEP
javascriptreactjstypescripttextarea
AnOldSoul
AnOldSoul

Reputation: 4197

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.

Upvotes: 3

Views: 11590

Answers (1)

vijayst
vijayst

Reputation: 21826

Use a state called textMessage.

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

In componentWillReceiveProps, append to textMessage.

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

Bind to textMessage.

<textarea style={textAreaStyle} value={this.state.textMessage} />

Upvotes: 3

Related Questions