CODEWITHSUNDEEP
reactjs
Ava Juan
Ava Juan

Reputation: 113

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;

Upvotes: 0

Views: 1393

Answers (3)

Sultan H.
Sultan H.

Reputation: 2938

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

Upvotes: 2

John
John

Reputation: 1285

You can add your state to the text area.

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

Upvotes: 0

emre-ozgun
emre-ozgun

Reputation: 762

value={this.state.input}

you're not updating the value...

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

Upvotes: 0

Related Questions