React js Multiple Select [object Object], [object Object]

Question

I`m using Material UI to make a multiple Select. This is my code.

  <TextField
        classes={{ root: classes.root }}
        select
        name="states"
        id="states"
        fullWidth
        label="states where you want to work" 
        SelectProps={{
          multiple: true,
          value: states.states,
          onChange: handleFieldChange
        }}
      >
        {listStates.map(col => (
              <MenuItem selected classes={{ selected: classes.selected }} key={col} value={col}>
                  <Checkbox checked={states.states.indexOf(col) > -1} />
                  <ListItemText primary={col} />
              </MenuItem>
            ))} 
      </TextField>

Here is the handleFieldChange function:

  const handleFieldChange = event => {
      event.persist();
      setStates(states => ({
        ...states,
        [event.target.name]:
          event.target.type === "checkbox"
            ? event.target.checked
            : event.target.value
      }));
    };

And here is the array of States:

const listStates = [ "Aguascalientes", "Baja California", "Baja California Sur", "Campeche", "CDMX", "Coahuila de Zaragoza", "Colima", "Chiapas", "Chihuahua", "Durango", "Guanajuato", "Guerrero", "Hidalgo", "Jalisco", "EDOMEX", "Michoacán de Ocampo", "Morelos", "Nayarit", "Nuevo León", "Oaxaca", "Puebla", "Querétaro", "Quintana Roo", "San Luis Potosí", "Sinaloa", "Sonora",  "Tabasco",  "Tamaulipas",  "Tlaxcala", "Veracruz de Ignacio de la Llave", "Yucatán", "Zacatecas"];

Everything work fine, the values save in the useState correctly, but in the screen I dont see the values I selected, I only see [object Object], [object Object].

Do you know why it´s happening??

Regards

What is the content of the listStates variable? Because that looks like an array of objects instead of an array of strings for example. — Bert Maurau
– Bert Maurau, Commented Aug 15, 2020 at 0:11

Sunil Chaudhary · Accepted Answer · 2020-08-15 01:06:15Z

4

The issue seems to be a missing props renderValue. value is the list of values selected but renderValue function gives the actual rendering logic. Pass this additional props and it should work fine.

As per the official docs:
renderValue is function(value: any) => ReactNode where value - the value provided to the component.

Sample Code:

SelectProps={{
  multiple: true,
  value: states.states,
  onChange: handleFieldChange,
  renderValue: (data) => <div>{data.join(", ")}</div>
}}

Hope it helps. Revert for any doubts/clarifications.

answered Aug 15, 2020 at 1:06

Sunil Chaudhary

4,7733 gold badges26 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

React js Multiple Select [object Object], [object Object]

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