1

I am creating custom components of select and facing some issues. Showing this error Cannot read property 'map' of undefined. I want to map select option and use in pages from props

function CustomSelect(props) {
  const classes = useStyles();
  const options = [
    "Religion", 
    "Internal ", 
    "Not Profit", 
  ];
  const {
    age,
    setAge,
    list
  } = props;

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <FormControl variant="filled" className={classes.formControl}>
      <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-filled-label"
          id="demo-simple-select-filled"
          value={age}
          onChange={handleChange}
        >
        {list.map(item => (
            <MenuItem value="test">
                {item.options}
            </MenuItem>
          ))}
      </Select>
    </FormControl>
  )
}
2
  • Are you passing list (as in array) from parent component? Commented Jul 17, 2020 at 7:09
  • Can you show your list array? Commented Jul 17, 2020 at 7:18

1 Answer 1

2

list is passed as a prop, so in this situation you should probably provide a default value.

function CustomSelect(props) {
  const classes = useStyles();
  const options = [
    "Religion", 
    "Internal ", 
    "Not Profit", 
  ];
  const {
    age,
    setAge,
    list = [], // <-- provide an initial value if undefined
  } = props;

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <FormControl variant="filled" className={classes.formControl}>
      <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-filled-label"
          id="demo-simple-select-filled"
          value={age}
          onChange={handleChange}
        >
        {list.map(item => (
            <MenuItem value="test">
                {item.options}
            </MenuItem>
          ))}
      </Select>
    </FormControl>
  )
}

You should probably also define propTypes so you can ensure the correct type is passed.

Typechecking with PropTypes

import PropTypes from 'prop-types';

CustomSelect.propTypes = {
  list: PropTypes.array.isRequired,
};

If you can, be as specific as possible

list: PropTypes.arrayOf(PropTypes.shape({
  options: PropTypes.string.isRequired,
}))

The .isRequired bit will throw a warning in non-production builds that the list prop is undefined or otherwise not been passed.

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

2 Comments

yes, this error is resolved to thank you. but options array not get in map list
@TusharKumawat Can you provide what an item.options object shape is? i.e. what is it you're trying to render there with it?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.