React Js create option list from array

Question

I'm trying to create an options for my select list:

getMarkOptions: function () {
    var options = this.props.renderProps;

    return options.map(function (mark, i) {
        return <option
            key={i}
            value={mark}>
            {mark}
        </option>
    });
},


render: function () {

    console.log('mark editor ' + this.props);

    var selectedMark = this.props.value,
        row = this.props.data,
        highlightCurrentDay = this.props.highlight ? 'edit-select__currentDay':'';
        return (            
            <select
                value={selectedMark}
                ref="selectMark"
                className={"edit-select form-control " + highlightCurrentDay}
                onChange={this.onChange}
            >
                {this.getMarkOptions()}
            </select>      
        );
}

Data:

var marks = [
        {"id": 1, "caption": "/", "code": "/", "meaning": "Present (AM)", "isStandardCode": true},
        {"id": 2, "caption": "\\", "code": "\\", "meaning": "Present (PM)", "isStandardCode": true},
        {"id": 3, "caption": "B", "code": "B", "meaning": "Educated off site", "isStandardCode": true},
        {"id": 4, "caption": "C", "code": "C", "meaning": "Other Authorised Circumstances", "isStandardCode": true},
        {"id": 5, "caption": "D", "code": "D", "meaning": "Dual registration", "isStandardCode": true}
    ];

I keep getting the error:

Unhandled rejection Invariant Violation: Objects are not valid as a React child (found: object with keys {id, caption, code, meaning, isStandardCode}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

Can anyone help?

jurassix · Accepted Answer · 2016-02-06 20:27:21Z

7

The invariant is pointing out that the child to the option tag is an object - <option>{mark}</option> - but should be a valid child e.g. string, int, React Component, etc - <option>{mark.meaning}</option>

Try something like this:

return options.map(function (mark, i) {
    return <option
        key={mark.id}
        value={mark.code}>
        {mark.meaning}
    </option>
});

edited Feb 6, 2016 at 20:27

answered Feb 6, 2016 at 20:22

jurassix

1,52910 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

azium Over a year ago

This is the correct answer, though I would suggest adding an explanation. If you do I'll upvote you :)

Collectives™ on Stack Overflow

React Js create option list from array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related