A connected component in the Layout multipleHoles, comes to the DOM empty

multipleHoles checked console.log in Layout, it is connected exactly. An example I took from off the tutorial facebook react composition-vs-inheritance A working example is here: skunshd.imtqy.com/react-test-example/

export function SplitPane(props) { return ( <div className="SplitPane"> <div className="SplitPane-left"> {props.left} </div> <div className="SplitPane-right"> {props.right} </div> </div> ); } export function Contacts() { return <div className="Contacts" />; } export function Chat() { return <div className="Chat" />; } import { SplitPane, Contacts, Chat } from './multipleHoles/SplitPane' export default function multipleHoles() { return ( <SplitPane left={ <Contacts /> } right={ <Chat /> } /> ); } import multipleHoles from './multipleHoles' export default class Layout extends React.Component { render() { return( <div> <WelcomeDialog /> <multipleHoles /> </div> ); } } import Layout from './components/Layout' ReactDOM.render( <Layout />, document.getElementById('root') );

(Imports of components removed on purpose)

  • 2
    Well, yes, you were clearly minus by the screenshots of the code instead of the code, this is not accepted here and it is written somewhere in the rules not to do so - Duck Learns to Hide
  • In general, I don’t see any errors in the code, could you make a reproducible example? - Duck Learns to Take Cover
  • I will also add that this may be due to the fact that these screenshots are made from a project working via webpack-dev-server with hmr, and if you look at the page without hmr, everything will work. I ran across a similar bug (but not in one of your packages): github.com/gaearon/babel-plugin-react-transform/issues/57 . There Dania Abramov writes that for functional components a different approach is needed at the level of the implementation of the transformer, perhaps for the packages that you use it also extends - Duck Learns to Take Cover
  • In general: 1. Glue a reproducible example. 2. Check out the work of this thing without hmr-magic. If it still doesn’t work, then you have to think about it - Duck Learns to Take Cover
  • Please add code in the body of the question as text, not an image. To do this, use the " edit " link located under the question marks. - Nicolas Chabanovsky ♦

1 answer 1

Everything was very simple: it turns out that jsx does not understand self-written components from a small letter , everything from a small letter is considered a predefined element at the library level (html tag, that is). I myself found out with great surprise today, having written the production code on the reactor before the darkness. Just all my life I followed the style guides and there were no problems))

Well, that is just enough to simply name your component with a capital letter:

 import MultipleHoles from './multipleHoles';