Convert to Uppercase and set as Textarea value using Reactjs

I wrote a program which has one Textarea The user inputs the text, And when the button in clicked. I want to replace the textarea text into Uppercase.

And, I want the output in same textarea.

I wrote this, but it's not setting the converted text in textarea. When I checked with console.log it's working well.

I don't know how to set the converted text to textarea.

I'm using this package (https://www.npmjs.com/package/text-case) for text case conversion. I'm planning to add lower case and others. that's why.

import React, { Component } from "react";
import { Container, Card, Button,ButtonGroup, ButtonToolbar} from "react-bootstrap";
import { Link } from "react-router-dom";

import { upperCase } from "text-case"; //https://www.npmjs.com/package/text-case

class textCase extends Component {
  state = {
    input: "",
  };

  render() {
    return (
      <>
        <div className="App">
          <Container container-lg>
            <div class="services-grid">
              <div class="text-case">
                <Card>
                  <Card.Header>Paste your text below</Card.Header>
                  <textarea
                    rows={15}
                    onChange={(e) => {
                      this.setState({
                        input: e.target.value,
                      });
                    }}
                  ></textarea>
                </Card>
                <p>{this.state.output}</p>
                <ButtonToolbar aria-label="Toolbar with button groups">
                  <ButtonGroup className="me-2" aria-label="First group">
                    <Button onClick={this.convertTextToUpperCase}>
                      Uppercase
                    </Button>
                  </ButtonGroup>
                </ButtonToolbar>
              </div>
            </div>
          </Container>
        </div>
      </>
    );
  }

  convertTextToUpperCase = () => {
    this.state.output = upperCase(this.state.input);
  };
}

export default textCase;

4 answers

  • answered 2021-09-11 18:01 emreozgun10

    value={this.state.input}
    

    you're not updating the value...

    https://reactjs.org/docs/forms.html

  • answered 2021-09-11 18:01 John

    You can add your state to the text area.

    <textarea
      rows={15}
      onChange={(e) => {
        this.setState({
          input: e.target.value,
        });
      }} 
      value={this.state.input} />
    

  • answered 2021-09-11 18:02 Kofusu

    try to add value={nameState} on textarea

  • answered 2021-09-11 18:11 Sultan H.

    We can do a simple modification to do what you want.

    First, it's a convention to write the custom methods before the render method in React components, I would suggest moving convertTextToUpperCase in that order.

    To fix the flow you have:

      convertTextToUpperCase = () => {
        this.setState((currentState) => ({
           ...currentState,
           input: upperCase(currentState.input),
        }));
      };
    

    The change above includes the usage of the method setState that is responsible for changing the state of a React component.

    Read about: What does setState do?

    Also, you can still use the JS String .toUpperCase or .toLowerCase with anystring.

    Such as:

    let firstName = "kolay";
    
    firstName = firstName.toUpperCase();
    console.log(firstName);
    // output: KOLAY
    
    firstName = firstName.toLowerCase();
    // output: kolay
    
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum