Odtnhj

I created a dropdown box with a onChange event to filter data, for example ['campuse A','campus B', ...]. When I selected the dropdown value, the returned data works fine but my dropdown box only has the selected value, 'campus A' and default "Select" value. How to fix this problem? Thanks.
App.js

import React, Component from 'react';
import './App.css';
import Course from './Components/Course';
import axios from 'axios';
//import CampusName from './Components/CampusName';

class App extends Component 
constructor() 
super();

this.state =
 courses:,
 selectedCampus:'' 

 ;



componentDidMount()

axios.get('myapiURL')
.then(response=>
 this.setState(courses:response.data);
 );


_getUniqueCampusName()
const courses=this.state.courses;
const campusSelection=[...new Set(courses.map(item=>item.CAMPUS_NAME))];

return campusSelection.map((campus,index)=>(<CampusName key=index value= 
 campus onChange="this._campusFilter.bind(this)"/>));
 
//campus filter
_campusFilter(event)
const selection = event.target.options[event.target.selectedIndex];
let filteredData;
if (selection.value === "0") 
 filteredData= this.state.courses;
 return;

else
 filteredData = this.state.courses.filter(item=>
 return (item.CAMPUS_NAME === event.target.value);
 );
 

this.setState(
selectedCampus: event.target.value,
courses: filteredData

 );



render() 
 const courses= this.state.courses.map(course=>(<Course ID=course.ID 
 coursename=course.SUBJECT />)); 
 const campusName=this._getUniqueCampusName();
 const renderCourses = courses.map((course, index) => 
 return <li key=index><Course key=index ID=course.ID SUBJECT= course.SUBJECT CAMPUS_NAME=course.CAMPUS_NAME /></li>;
 );


return (
 <div className="App">

 <div className="filter">
 <select name="campus" onChange=this._campusFilter.bind(this)>
 <option value="0">Select a Campus</option>
 campusName

 </select>
 </div>
 <div className="Course">Courses: renderCourses

 </div>

 </div>
 );
 


export default App;

Course.js

import React from 'react';
const course=props=>
return(
 <div className="Course">

 <p>ID: props.ID</p>

 <p>SUBJECT: props.SUBJECT</p>
 <p>Campus: props.CAMPUS_NAME</p>
 </div>
 );


export default course;