Rendering child component and passing all options. The parent component works with the same options. Code sample of the scenario is below the options in the child component are passed from parent component as props
Parent Component
class OptionList extends Component {
renderUsers() {
if(this.props.users.length){
return this.props.users.map(option => (
<Client options={this.props.options}
/>
));
}
}
renderOptionsForm() {
return (
<div>
<form>
<div className="form-row">
<Select
options={this.props.options}
isMulti
/>
</div>
<ul>
{this.renderUsers()}
</ul>
);
}
render() {
return (
<div className="width-narrow">
{this.renderOptionsForm()}
</div>
);
}
}
// props
OptionList.propTypes = {
options: PropTypes.array.isRequired,
};
OptionList.childContextTypes = {
muiTheme: PropTypes.object.isRequired,
};
// container
export default withTracker(() => {
Meteor.subscribe('options');
Meteor.subscribe('users');
return {
options: Options.find({}).fetch().map(({ name: label, _id: value }) => ({ label, value })),
users: Users.find().fetch()
};
})(OptionList);
child component
export default class Option extends Component {
renderEditOptions() {
return (
<div>
<Select
options={this.props.deliveryTypes}
isMulti
/>
</div>
);
}
render() {
return (
<div>
{ this.renderEditOptions() }
</div>
);
}
}
here the values are showing correctly but the options dropdown never popups