Is there any possibility to pass text between react component tags?

Question

I was wondering if it is possible in react to pass data between two React component tags

Example:

Component.js

var React = require('react');  export class MyComponent extends React.Component {     render() {         return /*some text*/;     } } 

App.js

/*rendered to page*/ <MyComponent>How do I display this text?</MyComponent> 

I know I could just add this.props.text but just curious if that's an option

Answer 1

You can use this.props.children:

export class MyComponent extends React.Component {     render() {         return <div>{this.props.children}</div>     } } 

And then write it as a JSX element:

<MyComponent>How do I display this text?</MyComponent> 

Answer 2

Similar to Danny Delott's answer, except simpler with a function component and props destructuring.

export default function MyComponent({ children }) {   return (     <div>{children}</div>   ); }