React: Appending Text to a TextArea

I wanted to ask how I could append the output variable (which I get through the post call with Axios) to the textarea, which takes the input variable as its value.

I just have literally no idea how to do such a thing …

I want to get the same result shown in the following video https://www.youtube.com/watch?v=OcyBYfK6gfY

import React from "react";
import { Form, Button } from "react-bootstrap";
import axios from "axios";



import "bootstrap/dist/css/bootstrap.min.css";

const TRANSLATE_API_URL = "/translate";




class Interface extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      output: "",
      buttonText: "Submit",
      description: "Description",
    };
    // Bind the event handlers
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleClick = this.handleClick.bind(this);


  }





  handleInputChange(e) {
    this.setState({ input: e.target.value });
  }

  handleClick(e) {
    e.preventDefault();
    let body = {
      prompt: this.state.input
    };
    axios.post(TRANSLATE_API_URL, body).then(({ data: { text } }) => {
      this.setState({ output: text });
    });
  }

  render() {
    return (
      <div>
        <head />
        <body style={{ alignItems: "center", justifyContent: "center" }}>
          <div
            style={{
              margin: "auto",
              marginTop: "80px",
              display: "block",
              maxWidth: "500px",
              minWidth: "200px",
              width: "50%"
            }}
          >
          
            <Form onSubmit={this.handleClick}>
              <Form.Group controlId="formBasicEmail">            
                <Form.Label>{this.state.description}</Form.Label>
                <Form.Control
                  type="text"
                  as="textarea"
                  className="tarea"
                  placeholder="Enter text"
                  value={this.state.input}
                  onChange={this.handleInputChange}
                ></Form.Control>
              </Form.Group>

              <Button variant="primary" type="submit">
                {this.state.buttonText}
              </Button>
            </Form>

            {this.state.output}
            
          </div>
        </body>
      </div>
    );
  }
}

export default Interface;

Answer

You can use only one state property as the textarea value.

To keep the previous text and add the Axios response to it, I would try:

this.setState({ input: this.state.input + text });

Instead of:

this.setState({ output: text });

To create the word by word add effect, try this:

let thisComponent = this;
axios.post(TRANSLATE_API_URL, body).then(({ data: { text } }) => {
  
  let wordDelay = 100  // Add a word every 100ms
  
  let timerDelay = 0
  text.split(" ")
    .forEach(word => {
      setTimeout(function(){
        thisComponent.setState({ input: thisComponent.state.input + " " + word });
      },timerDelay);
      timerDelay += wordDelay;
    });
});

Leave a Reply

Your email address will not be published. Required fields are marked *