Array state variable doesn't render - reactjs

Question

I have a table that needs to be rendered dynamically so I put in state, the problem is that I can't return it via state , it can only be queried with forEach function directly:
This code works:
render() {
let rows=[], rows2=[];
var PRODUCTS = [
{id:0,category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{id:1,category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{id:2,category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{id:3,category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{id:4,category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{id:5,category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
PRODUCTS.forEach((product)=>{
if( product.name.indexOf(this.props.searchText)==-1 && this.props.searchText!='')
{return;}
if(this.props.inStockOnly){
if(product.stocked){
if(product.category=="Sporting Goods"){
rows.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
}
else {
rows2.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
}
}
}
else {
if(product.category=="Sporting Goods"){
rows.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
}
else {
rows2.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
}
}
})
And this doesn't:
render() {
let rows=[], rows2=[];
this.state.products.forEach((product)=>{
if( product.name.indexOf(this.props.searchText)==-1 && this.props.searchText!='')
{return;}
if(this.props.inStockOnly){
if(product.stocked){
if(product.category=="Sporting Goods"){
rows.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
}
else {
rows2.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
}
}
}
else {
if(product.category=="Sporting Goods"){
rows.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
}
else {
rows2.push(<ProductRow product={product} key={product.id} onDestroy={this.Destroy}/>)
}
}
})
It triggers this error :
product.name.indexOf is not a function
Update
this how I set my state :
var PRODUCTS = [
{id:0,category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{id:1,category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{id:2,category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{id:3,category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{id:4,category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{id:5,category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
class ProductTable extends React.Component {
constructor(props)
{
super(props)
this.state={
products:PRODUCTS
};
}......
Can you help me ?

Answer 1

As #AdrianoReptti said in comments ,the problem was with name.
Actually in another component i changed the product's name in order to light out if the components is in stock or not :
product.name=product.stocked?product.name:<span style={{color:"red"}}>{product.name}</span>;
i fixed the code and now it runs :)
But it's still weird i thought that the state of a component is private and can only be changed with setState and not with the return of a children component.

Answer 2

For me your code is working fine. I have tried in the console. Try to restart the server.