Why am I getting an uncaught type error when using map in React JS jsx?

Question

I'm creating a component for selecting an input based on available options in my courses object.

I'm currently getting this error: Uncaught TypeError: Cannot read property 'map' of undefined

Here is my code:

const SelectInput = ({name, label, onChange, defaultOption, value, error, options}) => {
    return (
        <div className="form-group">
            <label htmlFor={name}>{label}</label>
            <div className="field">
                {/* Note, value is set here rather than on the option - docs*/}
                <select name={name} value={value} onChange={onChange} className="form-control">
                <option value="">{defaultOption}</option>
                {options.map((option) => {
                    return <option key={option.value} value={option.value}>{option.text}</option>;  
                })}
                </select>
                {error && <div className="alert alert-danger">{error}</div>}
            </div>
        </div>
    );
};

Anyone knows the reason?

why do you need to wrap your parameters as an object {} ?

Bagus Trihatmaja
– Bagus Trihatmaja

2016-06-29 09:55:15 +00:00
Commented Jun 29, 2016 at 9:55 — Bagus Trihatmaja
– Bagus Trihatmaja, Commented Jun 29, 2016 at 9:55
@BagusTrihatmaja it is object destraction

Kokovin Vladislav
– Kokovin Vladislav

2016-06-29 10:01:57 +00:00
Commented Jun 29, 2016 at 10:01 — Kokovin Vladislav
– Kokovin Vladislav, Commented Jun 29, 2016 at 10:01

Vitaly Kravtsov · Accepted Answer · 2016-06-29 09:58:05Z

1

You expect that options are an array but you provide undefined options prop, so there is no map method for undefined

Provide not undefined options or try this:

const SelectInput = ({name, label, onChange, defaultOption, value, error, options = []}) => {
  ...
}

answered Jun 29, 2016 at 9:58

Vitaly Kravtsov

9705 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Why am I getting an uncaught type error when using map in React JS jsx?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related