Categories
React Answers

How to pass text between React component tags?

Spread the love

Sometimes, we want to pass text between React component tags.

In this article, we’ll look at how to pass text between React component tags.

How to pass text between React component tags?

To pass text between React component tags, we can add the children prop as a prop of the component we want to put text in between the tags of.

For instance, we write:

import React from "react";

const Foo = ({ children }) => <h1>{children}</h1>;

export default function App() {
  return <Foo>hello world</Foo>;
}

We create the Foo component that takes the children prop.

And we render children in between the h1 tags.

Next, we put ‘hello world’ in between the opening and closing Foo tags in App.

As a result, we should ‘hello world’ rendered between the h1 tags and we see it rendered in bold.

Conclusion

To pass text between React component tags, we can add the children prop as a prop of the component we want to put text in between the tags of.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *