How to Return Plain Text from a React Component

Sep 15, 2020 • 5 Minute Read

Introduction

In this short guide, we are going to explore how to return plain text from a React component and some alternatives. Now, after seeing the topic of this guide, you must have wondered, Why? Why do we need this? Well, sometimes, to make our code reusable, we create helper or utility functions. At times we need to use multiple utility functions in a single component. So, rather than importing those functions directly, we can encapsulate them in their components.

In this guide, we are going to create a component to transform a text based on the props.

Straight to the Code!

App.js

In the App.js file, we will import the <TransformText /> component (which we will create shortly) and pass a text prop to it.

      import React from "react";
import TransformText from "./TransformText";

export default function App() {
  return (
    <div className="App">
      <h1>My App</h1>
      <TransformText text="Hello World!!" />
    </div>
  );
}
    

TransformText.js

In the <TransformText /> component, we can transform the text to uppercase, slice the text, or replace a sub-text with another string. So, let's write the code for that.

The basic structure of the component will be as follows.

      import React, { Component } from "react";

class TransformText extends Component {
  state = {
    text: this.props.text
  };

  render() {
    return this.state.text;
  }
}

export default TransformText;
    

Now, in the componentDidMount() lifecycle method, we will add the logic to transform the text based on the props passed to the component.

      // ..

componentDidMount() {
const { uppercase, slice, replace } = this.props;
    if (uppercase) this.setState({ text: this.state.text.toUpperCase() });

    if (slice)
      this.setState({
        text: this.state.text.slice(slice[0], slice[1])
      });

    if (replace)
      this.setState({
        text: this.state.text.replace(replace[0], replace[1])
      });
}

// ..
    

Just a brief refresher on the above String methods:

The toUpperCase() method transforms a string to its uppercase value.

The slice() method returns an extracted part of the string based on the parameters passed, i.e., the start position and the end position.

The replace() method replaces the specified text in the string with another string.

Let's go back to our App.js file and pass the props to the component and check the output.

App.js

      // ..
export default function App() {
  return (
    <div className="App">
      <h1>My App</h1>
      <TransformText text="Hello World!!" uppercase />
    </div>
  );
}
    

Please set an alt value for this image...

Let's check the slice transform.

      <TransformText text="Hello World!!" slice={[2, 8]} />

Likewise, we can do the same for replace.

      <TransformText text="Hello World!!" replace={["Hello", "Hii"]} />

Complete Source Code

This section contains the source code for your reference in case you get stuck while following along.

App.js

      import React from "react";
import "./styles.css";
import TransformText from "./TransformText";

export default function App() {
  return (
    <div className="App">
      <h1>My App</h1>
      <TransformText text="Hello World!!" replace={["Hello", "Hii"]} />
    </div>
  );
}
    

TransformText.js

      import React, { Component } from "react";

class TransformText extends Component {
  state = {
    text: this.props.text
  };

  componentDidMount() {
    const { uppercase, slice, replace } = this.props;
    if (uppercase) this.setState({ text: this.state.text.toUpperCase() });

    if (slice)
      this.setState({
        text: this.state.text.slice(slice[0], slice[1])
      });

    if (replace)
      this.setState({
        text: this.state.text.replace(replace[0], replace[1])
      });
  }

  render() {
    return this.state.text;
  }
}

export default TransformText;
    

index.js

      import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
    

Conclusion

Organizing your code is one of the most important aspects of building web apps. It helps make the code more reusable, maintainable, and easy to understand for other developers working on your team. In this guide, we were able to handle text transformations in another component, making the code accessible from the parent component. I hope you liked this guide. Until next time, Happy Coding.