I am receiving this error

Error: Objects are not valid as a React child (found: object with keys {class, major}). If you meant to render a collection of children, use an array instead.

From the error and what I've read here I know I need to use an array, or sounds like .map may also be helpful. My question is where exactly do I need to be making changes?

  const CSclasses = [
    {class: 'CS 101', major: 'CS'},
    {class: 'CS 191', major: 'CS'},
    {class: 'CS 201R', major: 'CS'},
    {class: 'CS 291', major: 'CS'},
    {class: 'CS 303', major: 'CS'},
    {class: 'CS 320', major: 'CS'},
    {class: 'CS 349', major: 'CS'},
    {class: 'CS 349R', major: 'CS'},
    {class: 'CS 404', major: 'CS'},
    {class: 'CS 441', major: 'CS'},
    {class: 'CS 449', major: 'CS'},
    {class: 'CS 456', major: 'CS'},
    {class: 'CS 457', major: 'CS'},
    {class: 'CS 458', major: 'CS'},
    {class: 'CS 461', major: 'CS'},
    {class: 'CS 465R', major: 'CS'},
    {class: 'CS 470', major: 'CS'},
    {class: 'CS 5520', major: 'CS'},
    {class: 'CS 5525', major: 'CS'},
    {class: 'CS 5552A', major: 'CS'},
    {class: 'CS 5565', major: 'CS'},
    {class: 'CS 5573', major: 'CS'},
    {class: 'CS 5590PA', major: 'CS'},
    {class: 'CS 5592', major: 'CS'},
    {class: 'CS 5596A', major: 'CS'},
    {class: 'CS 5596B', major: 'CS'},
  ]

        <Autocomplete
          multiple
          id="manage-CS-classes"
          options={CSclasses}
          disableCloseOnSelect
          getOptionsLabel={(option) => option.class}
          renderOption={(props, option, { selected }) => (
            <li {...props}>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
              {option.class}
            </li>
          )}
          style={{ width: 500 }}
          renderInput={(params) => (
            <TextField {...params} label="CS Classes" placerholder="Added Classes" />
          )}
          />
     

CodePudding user response：

You need to set getOptionLabel to recognize which attribute is a label field

getOptionLabel={option => option.class}

I'm using class attribute as a label field for your case

<Autocomplete
          multiple
          id="manage-CS-classes"
          options={CSclasses}
          getOptionLabel={option => option.class}
          disableCloseOnSelect
          getOptionsLabel={(option) => option.class}
          renderOption={(props, option, { selected }) => (
            <li {...props}>
              <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
              />
              {option.class}
            </li>
          )}
          style={{ width: 500 }}
          renderInput={(params) => (
            <TextField {...params} label="CS Classes" placerholder="Added Classes" />
          )}
          />