CODEWITHSUNDEEP
reactjs
user911625
user911625

Reputation:

In react can I render a component's children without a wrapper?

I want to do:

  render: () ->
      {@props.children}

It is making me do:

  render: () ->
      <div>{@props.children}</div>

The reason I want to do the former is because the rendered children have their owner-based context set. But if I render them with the wrapper then the element which is the parent does not have its context set. This then generates a warning:

owner-based and parent-based contexts differ (values: undefined vs [object Object]) for key (x)

This is discussed here: https://gist.github.com/jimfb/0eb6e61f300a8c1b2ce7

But no solution is offered.

The warning occurs because the component which renders the child is the 'owner' and that is settting context but the div wrapper element is the 'parent' and has no context. My idea was to get rid of the div. But I can't get rid of it.

Upvotes: 8

Views: 4759

Answers (3)

Shishir Arora
Shishir Arora

Reputation: 5923

With React 16=>

render() {
    return <React.Fragment>{this.props.children}</React.Fragment>;
}

or

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

Upvotes: 4

Ed Staub
Ed Staub

Reputation: 15690

In situations where a single child is required:

render() {
    return React.Children.only(this.props.children)
}

This is what react-redux uses in connect(), FWIW.

Upvotes: 2

Ryan Madsen
Ryan Madsen

Reputation: 1227

I've used the following code to only use a wrapper <span> on text children:

render() {
  if (!this.props.children) {
    return null;
  } else if (React.isValidElement(this.props.children)) {
    return this.props.children;
  }
  return <span>{this.props.children}</span>;
}

Upvotes: 4

Related Questions