Programmatically populating a `<select>` element, using PreactJS

Question

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:

sc0ttj · Accepted Answer · 2019-12-01 17:39:43Z

OK I got a solution..

Pretty obvious to most I guess:

You MUST use an array of objects in this format:

In my the script which calls my <MySelect> component, somewhere near the top;

const options = [ { value: "ONE", name: 'First item' }, { value: "TWO", name: 'Second item' }, ];

And then in the render function of the MySelect component:

 render(params, state) { const optionsItems = this.params.options.map((data) => <option key={data.value} value={data.value}>{data.name}</option>); return ( <div className='my-select'> <select onChange={(event) => this.updateColours(event)}> {optionsItems} </select> </div>);

Inioluwa Sogelola · Accepted Answer · 2019-12-01 17:59:38Z

You could try it this way also, It's practically the same thing but in case you have a complex html to render you could just try this

render(params, state) { return ( <div className='my-select'> <select value='BAR' onChange={(event) => this.updateColours(event)}> {this.params.options.map((data) => <option key={data.id} value={data.id}>{data.name}</option>)} </select> </div>);

I find it neater not to complicate the render function

Collectives™ on Stack Overflow

Programmatically populating a `<select>` element, using PreactJS

2 Answers 2

OK I got a solution..

You MUST use an array of objects in this format:

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

OK I got a solution..

You MUST use an array of objects in this format:

Comments

Comments

Linked

Related