How to Return Plain Text from a React Component
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}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;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// ..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}
Let's check the slice transform.
1<TransformText text="Hello World!!" slice={[2, 8]} />
Likewise, we can do the same for replace.
1<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
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}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;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);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.