Can't update props of child components generated from JSON - json

Question

I just started learing react and I run in a trouble trying to update state of a single <Option /> child Element.
My flux Store is emiting change and in React devtools I can see the state of StyleOptions element being updated but it doesn't update the child components <Option />.
I suspect this is because I got the list of options kept in a variable.
I need to use this because I'm pulling this options from JSON.
const Options = this.state.options.map((parent) => {
const children = parent.children.map((child) => {
return (
<Option {...child} />
)
});
return <Option {...parent} children={children} />;
});
So I think this part might be causing problems.
My example data from OptionsStore looks like this.
this.options = [
{
key: "suitType",
label: "Suit Type",
selected: false,
children: [
{
key: "suittype_skinny",
parent: "suitType",
label: "Skinny",
price: "£50",
description: "Short description",
images: {
general: "http://placehold.it/600x600",
closeUp: "http://placehold.it/620x620",
thumbnail: "http://placehold.it/100x100",
},
selected: false,
},
{
key: "suittype_wedding",
parent: "suitType",
label: "Wedding",
price: "£50",
description: "Short description",
images: {
general: "http://placehold.it/600x600",
closeUp: "http://placehold.it/620x620",
thumbnail: "http://placehold.it/100x100",
},
selected: false,
}
]
}
]
Also the child props aren't being changed.
Full code here:
import React, { Component } from 'react';
import Option from './Option';
import OptionsStore from '../../stores/OptionsStore';
class StyleOptions extends Component {
constructor(props) {
super(props)
this.state = {
options: OptionsStore.getAllItems(),
}
}
componentDidMount() {
OptionsStore.on('change',(e) => {
this.setState({
options: OptionsStore.getAllItems(),
});
console.log('optionsStore received an update');
});
}
render() {
const Options = this.state.options.map((parent) => {
const children = parent.children.map((child) => {
return (
<Option {...child} />
)
});
return <Option {...parent} children={children} />;
});
return(
<div className="col-xs-6">
<ul className="list-group">
{Options}
</ul>
</div>
)
}
}
export default StyleOptions;
also the <Option /> code:
import React, { Component } from 'react';
export default class Option extends Component {
constructor(props) {
super(props);
this.hasChildren = this.props.children ? true : false;
this.hasThumb = this.props.images ? true : false;
this.children = this.state.children;
this.state = {
label: this.props.label,
description: this.props.description,
selected: false,
price: this.props.price
}
}
render() {
return (
<li className={this.hasChildren ? 'list-group-item':'col-sm-4 list-group-item' } selected={this.state.selected}>
<a className="media">
{this.hasThumb ? (
<div className="media-left media-middle">
<img src={this.props.images.thumbnail} alt={this.state.label} />
</div>
) : (
' '
)}
<div className="media-body">
<h4 className="option-name">{this.state.label}</h4>
<p className="info">{this.state.description}</p>
<span className="text-success pricing">{this.state.price}</span>
</div>
</a>
{this.hasChildren ? (
<ul className="panel-body">
{this.children}
</ul>
) : (
' '
)}
</li>
)
}
}
I hope anyone could help.

Answer 1

The issue is inside of your Option component.
You define this.children = this.state.children . After that, you define your initial state but there is no "children". So that children state is notdefined.
First, add children: this.props.children into your state.
Then, change
{this.hasChildren ? (
<ul className="panel-body">
{this.children}
</ul>
) : (
' '
)}
to
{this.hasChildren ? (
<ul className="panel-body">
{this.state.children}
</ul>
) : (
' '
)}
and there is no need to define this.children = this.state.children.
I hope it solves the issue.

Answer 2

Thank you alireza for your help.
I managed to fix it. The problem was that the <Option /> was receiving too much info. I removed all state calls and left only the if statements like below.
import React, { Component } from 'react';
export default class Option extends Component {
constructor(props) {
super(props);
this.hasChildren = this.props.children ? true : false;
this.hasThumb = this.props.images ? true : false;
//this.state = this.props;
}
render() {
return (
<li className={this.hasChildren ? 'list-group-item':'col-sm-4 list-group-item' }>
<a className="media">
{this.hasThumb ? (
<div className="media-left media-middle">
<img src={this.props.images.thumbnail} alt={this.props.label} />
</div>
) : (
' '
)}
<div className="media-body">
<h4 className="option-name">{this.props.label}</h4>
<p className="info">{this.props.description}</p>
<span className="text-success pricing">{this.props.price}</span>
</div>
</a>
{this.hasChildren ? (
<ul className="panel-body">
{this.props.children}
</ul>
) : (
' '
)}
</li>
)
}
}
Then modified my stateful component <StyleOptions /> like below
import React, { Component } from 'react';
import Option from './Option';
import OptionsStore from '../../stores/OptionsStore';
class StyleOptions extends Component {
constructor(props) {
super(props)
this.state = {
options: OptionsStore.getAllItems(),
}
}
componentWillMount() {
OptionsStore.on("change", () => {
this.setState({
options: OptionsStore.getAllItems(),
});
console.log('optionsStore received an update');
});
}
render() {
const { options } = this.state;
const allOptions = options.map((option) => {
const { children } = option;
const optionChildren = children.map((child) => {
return <Option {...child} />;
})
return <Option {...option} children={optionChildren} />;
});
return(
<div className="col-xs-12">
<ul className="list-group">
{allOptions}
</ul>
</div>
)
}
}
export default StyleOptions;
Not sure why it is working correctly now. I suspect that It might have changed because I modified the maps a little bit.
Old one / Broken one:
const Options = this.state.options.map((parent) => {
const children = parent.children.map((child) => {
return (
<Option {...child} />
)
});
return <Option {...parent} children={children} />;
});
New one/working:
const { options } = this.state;
const allOptions = options.map((option) => {
const { children } = option;
const optionChildren = children.map((child) => {
return <Option {...child} />;
})
return <Option {...option} children={optionChildren} />;
});