CODEWITHSUNDEEP
javascriptnode.jsreactjsselectreact-proptypes
Mark
Mark

Reputation: 1872

React prop-type module map undefined

Am getting a TypeError saying property of 'map' is undefined. Just switched over to using the prop-type module with React 16 and am wondering if I have some syntax issue or an error in my code as I am not finding how I can setup my select function outside of what I have in my code. This is for a form with type of input having its own container. For the select.js, my code is:

import React from 'react';
import PropTypes from 'prop-types';

const Select = (props) => (
    <div className="form-group">
        <select
            name={props.name}
            value={props.selectedOption}
            onChange={props.controlFunc}
            className="form-select">
            <option value="">{props.placeholder}</option>
            {props.options.map(opt => {
                return (
                    <option
                        key={opt}
                        value={opt}>{opt}</option>
                );
            })}
        </select>
    </div>
);

Select.propTypes = {
    name: PropTypes.string.isRequired,
    options: PropTypes.array.isRequired,
    selectedOption: PropTypes.string,
    controlFunc: PropTypes.func.isRequired,
    placeholder: PropTypes.string
};

export default Select;

Upvotes: 0

Views: 392

Answers (2)

Kumar Albert
Kumar Albert

Reputation: 280

Write default props for component to avoid props related exceptions 

Select.defaultProps = {
    options: [] // keep it as empty or give some default values
}

Upvotes: 1

Simon
Simon

Reputation: 950

It looks like you're expecting props.options to be an array, but the error is that options does not have a property of .map on it, which means it's likely not an array.

Try console.log(props.options) and console.log(typeof props.options), the output should help you diagnose your problem.

In the case that props.option will eventually have the right data, but not at first, try (props.options || []).map instead of props.options.map.

As a side note, PropTypes doesn't affect how a React app runs, it just performs input validation on props while developing your app.

Upvotes: 0

Related Questions