HelpHelp to debug my React Code - reactjs

Question

First of all, I want to ask whether is my statement is correct :
"When we are making components, it is better to put it in different files"
Is it correct? since currently I tried so, and it cause problems.
Parents :
import React, { Component } from 'react';
import './App.css';
import {SubmitComponent} from './submitComponent.jsx';
import {topicTable} from './topicTable.jsx';
// import {TopicsContainer} from './TopicsContainer.js'
const dashboardStyle = {
border: '2px solid black',
width: '70%',
height: 'auto',
marginLeft: 'auto',
marginRight: 'auto',
marginBottom: '100px',
};
class AppDashBoard extends Component {
constructor(props) {
super(props);
this.state = {
datas: []
}
}
submitTopic = (data) => {
console.log(data);
console.log(this.state.datas);
console.log(this.state.datas.concat([data]));
this.setState({
datas: this.state.datas.concat(data)
});
console.log(this.state.datas);
}
render() {
return (
<div style={dashboardStyle}>
<h1 style={{textAlign:'center'}}>Coding Exercise</h1>
<hr />
<SubmitComponent submitTopic={this.submitTopic} />
<topicTable topics={this.state.datas} />
</div>
);
}
}
export default AppDashBoard
and this is the topicTable component :
import React, {Component} from 'react';
import {oneTopic} from './oneTopic.jsx';
export class topicTable extends Component {
render() {
const topicstable = this.props.topics.map((topic) => (
<oneTopic
title={topic.title}
desc = {topic.desc}
vote = {topic.vote}
/>
));
console.log("HAHAHAHA");
return (
<div id="topics">
{oneTopic}
</div>
);
}
}
and Lastly, my oneTopic component:
import React, {Component} from 'react';
export class oneTopic extends Component {
render() {
return(
<div style={{width:'96%', height:300, backgroundColor :'#AAA'}}>
<h1>HAHAHAHA</h1>
</div>
);
}
}
My problems are :
1) In the topicTable component, the console.log("HAHAHA") is not executed at all, I wonder why ?
2) Also for the oneTopic, the HAHAHA is not showing at all.
Even I already export and import everything
Please help

Answer 1

ReactJS component names must begin with capital letters.
1) rename oneTopic to OneTopic
2) change {oneTopic} to <oneTopic />