class MySelect extends Component {
constructor(params, renderFunction, uniqueId) {
super(params);
this.params = {
...params,
};
this.uniqueId = uniqueId;
this.state = params.state; // not sure why I need this to avoid a null state?
this.updateColours = this.updateColours.bind(this);
// I also tried to "dangerously set innerHTML" with this:
// this.optionElems = '';
// Object.keys(this.params.options).forEach(key => {
// this.optionElems += `<option key="${key}" value="${key}">${this.params.options[key]}</option>`;
// });
}
...
render(params, state) {
const { options } = this.params;
return (
<div className='my-select'>
<select value='BAR' onChange={(event) => this.updateColours(event)} options={options} >
<option value='FOO'>Foo</option>
<option value='BAR'>Bar</option>
{Object.keys(options).forEach(key => {
return <option key={key} value={key}>{options[key]}</option>;
})}
</select>
</div>);
}
It is being called in the main App like so:
const myObj = {
ONE: 'First option',
TWO: 'Second option',
}
...
<MySelect wrapper={this.wrapper} state={this.state} options={myObj} />
When renderer, am I expecting the select on the page to contain:
<select>
<option value="FOO">Foo</option>
<option value="BAR">Bar</option>
<option value="ONE">First item</option>
<option value="TWO">Second item</option>
</select>
But all I get is:
<select>
<option value="FOO">Foo</option>
<option value="BAR">Bar</option>
</select>
NOTE:
I also tried this (defining the options first..):
render(params, state) {
const { options } = this.params;
const optionsItems = Object.keys(options).forEach(key => {
console.log('option: val, name', key, options[key]);
return <option key={key} value={key}>{options[key]}</option>;
});
console.log('options, optionsItems', options, optionsItems);
return (
<div className='my-select'>
<select value='BAR' onChange={(event) => this.updateColours(event)} options={options} >
{optionsItems}
</select>
</div>);
}
The options, params, optionsItem are not empty, and all log what I expect..
I've read various things to no avail:
