How to pass text between React component tags?

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.

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.

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.