YvusBellator YvusBellator - 1 month ago 7
React JSX Question

React: Render issue with custom components

I just have started learn React. I have problem with rendering my components.
This is my JSX code:

"use strict";
import React from 'react';
import { render } from 'react-dom';
import ddd from './Components/ddd';
import { Button } from 'office-ui-fabric-react/lib/Button';


const aaa = () => {
return (<span>AAA component</span>);
}

class ccc extends React.Component {
render(){return (<span>CCC component</span>);}
}

const bbb = React.createClass({
render: function() {
return (<span>BBB component</span>);
}
});

render(<div>
<aaa/>
<bbb/>
<ccc/>
<ddd/>
<Button>Button Component</Button>
</div>
,document.getElementById('content'));


and this is result in browser

<div id="content">
<div data-reactroot="">
<aaa/>
<bbb/>
<ccc/>
<ddd/>
<button aria-labelledby="Button0" class="ms-Button">
<span class="ms-Button-label" id="Button0">Button Component</span>
</button>
</div>
</div>


As you can see my components (aaa,bbb,ccc,ddd) are not rendered properly. Only Button from office-ui-fabric-react works. There is no error from babel or webpack so I have no idea what is wrong.

Answer

React component must begin with an Upper-case letter:

Aaa
Bbb
Ccc

From React:

To render a React Component, just create a local variable that starts with an upper-case letter

Comments