How to define a component inside another component in react

const ComponentTwo =  ()=> <div>I'm a second component.</div>; 

const ComponentOne =  ({children})=> <div>{children}</div>;   


const App = () => (
       <ComponentOne>
          <ComponentTwo />
       </ComponentOne>
      );

https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx

import React,{Component} from 'react';
import axios from 'axios/index'

const Course = (props)=>(

<tr>
    <td>{props.course.Name}</td>
    <td>{props.course.Course}</td>
    <td>{props.course.PassMark}</td>
    <td>{props.course.LecturerInCharge}</td>
    <td><button className="btn btn-primary" onClick
{()=>CourseView.buttonClick(props.course.Subjects)}>Subject</button></td>
<td><button className="btn btn-primary" onClick=.{()=>CourseView.TotalCalculation(props.course._id)}>Calculate</button></td>
</tr>
);

const Todo = props => (
  <tr>
    <td>{props.todo.todo_description}</td>
    <td>{props.todo.todo_responsible}</td>
    <td>{props.todo.todo_priority}</td>
    <td>
        <Link to={"/edit/"+props.todo._id}></Link>
    </td>
    <td>
        <Link to={"/delete/"+props.todo._id}></Link>
    </td>
</tr>
)

export default class CourseView extends Component{

constructor(props){
    super(props);
    this.state = {
        Courses:[]
    }
}

componentWillMount() {
    axios.get('http://127.0.0.1:4000/course').then((res)=>{
        this.setState({Courses:res.data});
    })
}

listelements(){
    return this.state.Courses.map((course,i)=>{
        return <Course course = {course} key={i}/>
    })
}

render() {
    return(
        <div>
            <table border="2px" align="center" style={{marginTop:100}}>
                <tr>
                <th>Name</th>
                <th>Course</th>
                <th>PassMark</th>
                <th>Lecturer in charge</th>
                <th>Subjects</th>
                    <th>Total</th>
                </tr>
                <tbody>
                {this.listelements()}
                </tbody>
            </table>
        </div>
    )
}

static TotalCalculation(id){
    axios.get('http://127.0.0.1:8080/total/'+id).then((res)=>{
        let total = (res.data.total);
        let subCount = (res.data.subjects.length);
        alert('You have to complete '+subCount+" subjects, Which will be Rs."+total+"/= in total.");
    })
}

static buttonClick(Subjects) {
    let data="";
    console.log(Subjects);
    for(let i=0;i<Subjects.length;i++){
        axios.get('http://127.0.0.1:4000/subject/'+Subjects[i]).then((res)=>{
            data = "Name: "+res.data.Name+", Description: "+res.data.Description+", Amount: "+res.data.Amount;
            data = data+'\n';
            alert(data);
        });

    }

}

}

DBSchema.js

const mongoose = require('mongoose');

const CourseSchema = new mongoose.Schema({
Name:{
    type:String,
    required:true
},
Course:{
    type:String,
    required:true
},
PassMark:{
    type:Number,
    required:true
},
LecturerInCharge:{
    type:String,
    required:true
},
Subjects:{
    type:[mongoose.Schema.Types.ObjectId],

}
});

const SubjectSchema = new mongoose.Schema({
Name:{
    type:String,
    required:true
},
Description:{
    type:String,
    required:true
},
Amount:{
    type:Number,
    required:true
}
});

mongoose.model('Course',CourseSchema);
mongoose.model('Subject',SubjectSchema);

mongoose.connect('mongodb://127.0.0.1:27017/sliit-web',     {useNewUrlParser:true}).then(()=>{
console.log('Connected to DB');
}).catch((err)=>{
   console.error(err);
 });

module.exports = mongoose;

var Express     = require('Express');
var bodyParser  = require('body-parser');
var Cors        = require('cors');
var router      = Express.Router();
var UserRoute   = require('./User/user.route');

var app = Express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(Cors());
app.use('/', UserRoute);

app.listen('8081', '127.0.0.1', function(err) {
if(err) {
    console.log(err);
    process.exit(-1);
}
console.log("Server listen on port 8081");
})

todoList()
{
    return this.state.todos.map(function(currentTodo,i){
        return <Todo todo={currentTodo} key={i}/>;
    });
}
render()
{
    return(
        <div>
           <h3>Todo List</h3>
           <table>
               <thead>
                   <tr>
                       <th>Description</th>
                       <th>Responsible</th>
                       <th>Prioroty</th>
                       <th>Completed</th>
                   </tr>
               </thead>
               <tbody>
                   {this.todoList}
               </tbody>
           </table>
        </div>
    )
}