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 ( 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"; //

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

  render() {
    return (
        <div className="App">
          <Container container-lg>
            <div class="services-grid">
              <div class="text-case">
                  <Card.Header>Paste your text below</Card.Header>
                    onChange={(e) => {
                <ButtonToolbar aria-label="Toolbar with button groups">
                  <ButtonGroup className="me-2" aria-label="First group">
                    <Button onClick={this.convertTextToUpperCase}>

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

export default textCase;

4 answers

  • answered 2021-09-11 18:01 emreozgun10


    you're not updating the value...

  • answered 2021-09-11 18:01 John

    You can add your state to the text area.

      onChange={(e) => {
      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) => ({
           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();
    // 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