Author avatar

Gaurav Singhal

How to Return Plain Text from a React Component

Gaurav Singhal

  • Sep 15, 2020
  • 5 Min read
  • 44,906 Views
  • Sep 15, 2020
  • 5 Min read
  • 44,906 Views
Web Development
React

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.

1import React from "react";
2import TransformText from "./TransformText";
3
4export default function App() {
5  return (
6    <div className="App">
7      <h1>My App</h1>
8      <TransformText text="Hello World!!" />
9    </div>
10  );
11}
jsx

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.

1import React, { Component } from "react";
2
3class TransformText extends Component {
4  state = {
5    text: this.props.text
6  };
7
8  render() {
9    return this.state.text;
10  }
11}
12
13export default TransformText;
jsx

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

1// ..
2
3componentDidMount() {
4const { uppercase, slice, replace } = this.props;
5    if (uppercase) this.setState({ text: this.state.text.toUpperCase() });
6
7    if (slice)
8      this.setState({
9        text: this.state.text.slice(slice[0], slice[1])
10      });
11
12    if (replace)
13      this.setState({
14        text: this.state.text.replace(replace[0], replace[1])
15      });
16}
17
18// ..
jsx

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

1// ..
2export default function App() {
3  return (
4    <div className="App">
5      <h1>My App</h1>
6      <TransformText text="Hello World!!" uppercase />
7    </div>
8  );
9}
jsx

Let's check the slice transform.

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

Likewise, we can do the same for replace.

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

Complete Source Code

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

App.js

1import React from "react";
2import "./styles.css";
3import TransformText from "./TransformText";
4
5export default function App() {
6  return (
7    <div className="App">
8      <h1>My App</h1>
9      <TransformText text="Hello World!!" replace={["Hello", "Hii"]} />
10    </div>
11  );
12}
jsx

TransformText.js

1import React, { Component } from "react";
2
3class TransformText extends Component {
4  state = {
5    text: this.props.text
6  };
7
8  componentDidMount() {
9    const { uppercase, slice, replace } = this.props;
10    if (uppercase) this.setState({ text: this.state.text.toUpperCase() });
11
12    if (slice)
13      this.setState({
14        text: this.state.text.slice(slice[0], slice[1])
15      });
16
17    if (replace)
18      this.setState({
19        text: this.state.text.replace(replace[0], replace[1])
20      });
21  }
22
23  render() {
24    return this.state.text;
25  }
26}
27
28export default TransformText;
jsx

index.js

1import React from "react";
2import ReactDOM from "react-dom";
3
4import App from "./App";
5
6const rootElement = document.getElementById("root");
7ReactDOM.render(<App />, rootElement);
jsx

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.