React Only return props.children

Question

All:

I am pretty new to React, I wonder how can I build a logic only component without adding any element(only used to processing some data), something like:

class LogicCom extends Component {     constructor(props){super(props);this.props = props;}     render(){         return (             {this.props.children}         )     } } 

Answer 1

EDIT In React v16+, you can return strings and arrays from components. So, it is perfectly valid for a component to simply return its children...

render() {   return this.props.children } 

Read more about it in the docs.

ORIGINAL ANSWER

What you have will work IFF there is only one child (and you fix your syntax errors). However, children can be an array of many children and you cannot return an array in a render function. So, you must do one of two things...

1. Enforce that your component only accepts a single child with React.Children...

class LogicCom extends Component {     render(){         // this will throw if there are many children         return React.Children.only(this.props.children)     } } 

2. Wrap the children in another component...

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

Answer 2

React components MUST have a single root DOM element to render.

From the official docs:

The render() method is required.

When called, it should examine this.props and this.state and return a single child element. This child element can be either a virtual representation of a native DOM component (such as or React.DOM.div()) or another composite component that you've defined yourself.

You can also return null or false to indicate that you don't want anything rendered. Behind the scenes, React renders a tag to work with our current diffing algorithm. When returning null or false, ReactDOM.findDOMNode(this) will return null.

In your case it's easy enough -- just wrap your this.props.children in an outer element of some kind.

render(){     return (         <div>{this.props.children}</div>     ) }