0

Estoy haciendo un formulario dinámico para que se pueda enviar diferentes selects a través de un array. El formulario esta dentro de un componente el cual hace un map al array para construir los selects El problema que tengo es que cuando selecciono una opción se coloca en los demás selects que tengo

return (
<React.Fragment>
  {props.data.map((filter: IDropDownOpts) => (
    <ExpansionPanel
      className={classes.kshExpand}
      key={filter.id}
      variant="outlined"
      expanded={props.expandId[filter.id]}
      onChange={() => props.handleChange(filter.id)}
    >
      <ExpansionPanelSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1bh-content"
        id="panel1bh-header"
      >
        <p className={classes.kshTittle}>{filter.title}</p>
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
        <FormControl
          fullWidth
          id={`filters-${filter.id}`}
          variant="outlined"
        >
          <InputLabel htmlFor={`filters-${filter.id}`}>
            {filter.label}
          </InputLabel>
          <Select
            id={`filters-${filter.id}`}
            name={`filters-${filter.id}`}
            fullWidth={true}
            labelId="mutiple-select-label"
            multiple
            onChange={handleChange}
            value={selected}
            renderValue={(selected: any) => selected.join(", ")}
          >
            {filter.options.map((option) => (
              <MenuItem key={option.key} value={option.value}>
                <ListItemIcon>
                  <Checkbox checked={selected.indexOf(option.value) > -1} />
                </ListItemIcon>
                <ListItemText primary={option.value} />
              </MenuItem>
            ))}
          </Select>
        </FormControl>
        {selected.map((option: any) => (
          <Chip
            variant="default"
            size="small"
            label={option}
            color={"secondary"}
            onClick={() => handleClickChip(option)}
            style={{
              marginLeft: 5,
              marginRight: 5,
              borderRadius: 6,
            }}
          />
        ))}
      </ExpansionPanelDetails>
    </ExpansionPanel>
  ))}
</React.Fragment>
);

Esto me construye los oguiente

introducir la descripción de la imagen aquí

Pero cuando selecciono una opción de cualquiera de los selects que se renderizan, todos los demas se llenan con el mismo valor

introducir la descripción de la imagen aquí

Me podrían ayudar viendo que estoy haciendo mal

1 respuesta 1

0

Posiblemente lo que está pasando es que TODOS los select están referenciando el mi selected y además todos están editando el mismo valor y de igual manera.

He hecho un sandbox que está funcionando: https://codesandbox.io/s/fervent-ardinghelli-cltcq?file=/src/Form.js

Vamos al código:

   <Select
            id={`filters-${filter.id}`}
            name={`filters-${filter.id}`}
            fullWidth={true}
            labelId="mutiple-select-label"
            multiple
            onChange={handleChange}
            value={selected}
            renderValue={(selected: any) => selected.join(", ")}
          >
            {filter.options.map((option) => (
              <MenuItem key={option.key} value={option.value}>
                <ListItemIcon>
                  <Checkbox checked={selected.indexOf(option.value) > -1} />
                </ListItemIcon>
                <ListItemText primary={option.value} />
              </MenuItem>
            ))}
          </Select>

Si vemos el select:

  • TODOS tienen value={selected}, entonces todos mostrarán el valor selected
  • TODOS tienen onChange={handleChange}, entonces todos harán lo mismo al ser editados

A pesar, de que siempre queremos hacer lo mismo tenemos que buscar una manera de identificar el select y además una manera de almacenar distintos valores.

Entonces, hice un poco de código enfocado solo en el problema, posiblemente te ayude a corregir el tuyo si cambias el onChange, el value

  const [answers, setAnswers] = useState({});

  const handleChange = (filterId, optionValue) => {
    const filter = props.data.find((filter) => filter.id === filterId);
    const option =
      filter.options &&
      filter.options.find((option) => option.value === optionValue);
    setAnswers({ ...answers, [filterId]: option });
  };
  return (
    <div className="Form">
      {props.data &&
        props.data.map((filter) => (
          <div key={filter.id}>
            <label>
              {filter.label}
              <select
                value={answers[filter.id] && answers[filter.id].value}
                onChange={(e) => handleChange(filter.id, e.target.value)}
              >
                <option value={""}></option>
                {filter.options.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
            </label>
            --- {answers[filter.id] && answers[filter.id].label}
          </div>
        ))}
    </div>
  );
}

Fijate en lo siguiente:

  • Cree un valor answers que será donde guardareos TODAS nuestras respuestas (es un objeto)
  • En la función handleChange recibo el filterId del select que estoy modificando y el value. Con estos valores busco la opción seleccionado y digo que mis respuestas serán igual a mis respuesta actuales, pero para el select será la opción seleccionada.
  • En el select ahora el value es: value={answers[filter.id].value} es decir, la respuesta para ese filter en específico
  • En el handle change invoco la función handleChange, pero pasando el id del select que está cambiando
  • Finalmente, para el Chip tendría que seleccionar la respuesta para el filter.id PERO a diferencia de en el select que tenemos el value. Acá queremos mostrar el label.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.