React select values not remaining selected - reactjs

Question

I am trying to create a select dropdown that onChange updates all the select dropdowns in the table.
State is being set correctly. However when I change any of the selects in the table the value does not remain selected (displayed).
It sets state correctly fro both children and master selects. Its just not displaying the option selected.
import React, { Component } from 'react';
// import ReactDOM from 'react-dom';
// import { Select } from 'element-react';
import Select from 'react-select';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
products: [],
categories: [],
filterText: '',
};
this.handleChange = this.handleChange.bind(this);
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
this.masterCategoryChange = this.masterCategoryChange.bind(this);
}
handleFilterTextChange(filterText) {
this.props.handleFilterTextChange(filterText)
this.setState({
filterText: filterText
});
}
handleChange(product, index, e){
product.category_id = e.value;
let selectValues = this.state.selectValues;
selectValues[index] = e.value;
this.setState({selectValues});
}
masterCategoryChange(e){
let selectValues = this.state.selectValues;
selectValues.forEach(function(sv, index) {
selectValues[index] = e.value;
});
console.log(selectValues)
this.setState({selectValues});
}
/* Inside your component */
componentDidMount() {
const apiRequest = url => fetch(url).then(response => response.json())
const apiRequestProducts = () => {
return apiRequest("http://docker.for.mac.localhost:4000/api/products?filter[limit]=5").then(function(response) {
return response;
});
};
const apiRequestCategories = () => {
return apiRequest("http://docker.for.mac.localhost:4000/api/categories?filter[limit]=7").then(function(response) {
return response;
});
};
this.setState({loading: true});
Promise.all([
apiRequestProducts(),
apiRequestCategories()
]).then(results => {
var selectValues = [];
for (var i=0; i < results[0].length; i++) {
selectValues[i] = '';
}
this.setState({
selectValues,
products: results[0],
categories: results[1],
loading: false
});
}).catch(err => {
console.log('Oops, something went wrong', err);
});
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<FilterableProductTable
masterCategoryChange={this.masterCategoryChange}
handleChange={this.handleChange}
products={this.state.products}
categories={this.state.categories}
filterText={this.state.fliterText}
categorySelectValues={this.state.selectValues}
/>
</div>
);
}
}
class FilterableProductTable extends React.Component {
constructor(props) {
super(props);
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
this.handleCategoryChange = this.handleCategoryChange.bind(this);
this.handleMasterCategoryChange = this.handleMasterCategoryChange.bind(this);
}
handleFilterTextChange(filterText) {
this.props.handleFilterTextChange(filterText)
}
handleCategoryChange(product, index, e){
this.props.handleChange(product, index, e)
}
handleMasterCategoryChange(e){
this.props.masterCategoryChange(e)
}
render() {
return (
<div>
<SearchBar
filterText={this.props.filterText}
onFilterTextChange={this.handleFilterTextChange}
/>
<ProductTable
handleMasterCategoryChange={this.handleMasterCategoryChange}
handleCategoryChange={this.handleCategoryChange}
handleFilterTextChange={this.handleFilterTextChange}
products={this.props.products}
categories={this.props.categories}
filterText={this.props.filterText}
selectValues={this.props.categorySelectValues}
/>
</div>
);
}
}
class ProductTable extends React.Component {
constructor(props) {
super(props);
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
this.onProductCategoryChange = this.onProductCategoryChange.bind(this);
this.masterCategoryChange = this.masterCategoryChange.bind(this);
}
handleClick = () => {
console.log('this is:', this);
}
onProductCategoryChange(product, index, e){
this.props.handleCategoryChange(product, index, e)
}
masterCategoryChange(e){
this.props.handleMasterCategoryChange(e)
}
render() {
console.log('Rendering');
console.log(this.props.selectValues);
let options = this.props.categories.map(function (category) {
return { value: category.id, label: category.name };
})
console.log(options);
let rows = this.props.products.map((product, i)=> {
console.log(this.props.selectValues[i])
return (
<tr key={i}>
<td>{product.name}</td>
<td>{product.price}</td>
<td><Select
options={options}
value={this.props.selectValues[i]}
// value={product.category_id}
onChange={this.onProductCategoryChange.bind(this, product, i)}
/></td>
</tr>
)
});
return (
// <h3>MasterCategory : {masterCategoryId}</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th><CategorySelect
onChange={this.masterCategoryChange.bind(this)}
className='masterCategorySelect'
categories={this.props.categories}/></th>
</tr>
</thead>
<tbody>{rows}</tbody>
<tfoot>
<tr>
<td><div className='pull-right'><button onClick={this.handleClick}>Categorize</button></div></td>
</tr>
</tfoot>
</table>
);
}
}
class CategorySelect extends React.Component {
render() {
let options = this.props.categories.map(function (category) {
return { value: category.id, label: category.name };
})
return (
<Select
onChange={this.props.onChange}
options={options}
// value={value}
/>
);
}
}
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
}
handleFilterTextChange(e) {
this.props.onFilterTextChange(e.target.value);
}
render() {
return (
<form>
<input
type="text"
placeholder="Search..."
value={this.props.filterText}
onChange={this.handleFilterTextChange}
/>
</form>
);
}
}
export default App;