Keep seeing warnings about missing 'key' prop for DocumentTitle

[JobLeonard]

Not sure if I'm doing something wrong, if this is a problem with this component, or if the issue is in react-side-effect, but it's a slightly distracting (if harmless) warning that I can't get rid of:

bundle.0ae94dcb667ef563f4ee.js:sourcemap:3890 Warning: Each child in an array or iterator should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in div
    in DocumentTitle (created by SideEffect(DocumentTitle))
    in SideEffect(DocumentTitle)
    in NavbarView (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider

[sman591]

Each child in an array or iterator should have a unique "key" prop.

This sounds like the error could be coming from the content inside of <DocumentTitle>, not the DocumentTitle itself?

E.g,

<DocumentTitle title="My page">
  {someArray.map((data) => 
    <div>Hello, {data.name}</div>
  )}
</DocumentTitle>

The div needs the key prop:

<DocumentTitle title="My page">
  {someArray.map((data) => 
    <div key={data.name}>Hello, {data.name}</div>
  )}
</DocumentTitle>

[JobLeonard]

Yeah, that's what I figured at first, but that makes little sense for two reasons:

• I'm not using an iterator
• I tried giving the sole div inside DocumentTitle a key and it did nothing.
  • ... I tried giving the div inside the div a key, and it did nothing
  • I even tried giving components nested three levels deeper a key, and it did nothing (also, they aren't divs)

return (
   <DocumentTitle
      key='document-title'
      title={isViewingDataset ?
         datasetTitle :
         'Loom'}>
      <div key='main-view' className='view-vertical'>
         <div key='NavBarContainer'>
            {realNavBar}
            {dummyNavBar}
         </div>
         {this.props.children}
      </div>
   </DocumentTitle>
);

(yes, I've tried using alternatives to main-view)

And before anyone asks, this is the only instance of DocumentTitle in the entire app (defeating the point of react-side-effect a bit, but whatever).

I already checked the DocumentTitle source, but unless React.Children.only() somehow messes things up (I don't see how that would be possible)

DocumentTitle.prototype.render = function() {
  if (this.props.children) {
    return React.Children.only(this.props.children);
  } else {
    return null;
  }
};