How do I render a string as children in a React component?

Question

Take a simple component:

function MyComponent({ children }) {
  return children;
}

This works:

ReactDOM.render(<MyComponent><span>Hello</span></MyComponent>, document.getElementById('stage'));

but this doesn't (I removed the <span/> ):

ReactDOM.render(<MyComponent>Hello</MyComponent>, document.getElementById('stage'));

because React tries to call render on the string:

Uncaught TypeError: inst.render is not a function

On the other hand, this works fine:

ReactDOM.render(<p>Hello</p>, document.getElementById('stage'));

How do I make <MyComponent/> behave like <p/> ?

Answer 1

If you're using React 16.2 or higher, you can do this using React fragments:

const MyComponent = ({children}) => <>{children}</>

If your editor doesn't support fragment syntax, this will also work:

const MyComponent = ({children}) =>
    <React.Fragment>{children}</React.Fragment>

Keep in mind that you're still creating & returning a component (of type MyComponent) as far as React is concerned - it just doesn't create an additional DOM tag. This is a mixed bag:

• Upside: you'll still see a <MyComponent> tag in the React Debug Tools.

• Downside: if you're using Typescript or Flow, your transpiler may complain, because MyComponent's return type is still a React element (React.ReactElement).

Answer 2

Well the difference is <p> is an html element and MyComponent is a React Component.

React components need to render/return either a single component or a single html element.

'Hello' is neither.

Answer 3

You need at least one top-level HTML element. Your component can't really just output a string, that's not how React works.

The simplest solution is to simply make your MyComponent wrap it's output in a span or div.

function MyComponent({ children }) {
  return <span>{ children }</span>;
}

Answer 4

Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component.

source

And what you are returning is not a root node. You are returning a react component that is returning a string where it should be returning an HTML element.

You can either pass your string already wrapped with an HTML element (like you already did in your example) or you can wrap your string in a HTML element inside your "MyComponent" like this

function MyComponent({ children }) {
  return <span>{ children }</span>;
}

Answer 5

React can render either React components (classes) or HTML Tags (strings). Any HTML tag is by convention lowercase where a Component is Capitalized. Every React component has to render exactly one Tag (or null). To answer your question: you cannot.

In the example above, you render what's given with the children attribute where this will render the tag inside or a string that is not valid.