Onchange stops for every letter I type

Question

I am trying to have a single onChange event for each element that is rendered with the map function. The problem is that for each letter that I write, it is as if the execution stops, preventing me from writing freely and seeing the changes I am making in the text field in the console.

Here you can see the error: https://codesandbox.io/s/tender-wu-kuzqd

const options = [
  { id: 1, hour: 0, minute: 0, enrollment: '', value: 'ac.terapeutico', label: 'Ac. Terapéutico', color: getRandomColor() },
  { id: 2, hour: 0, minute: 0, enrollment: '', value: 'kinesiologia', label: 'Kinesiología', color: getRandomColor() },
  { id: 3, hour: 0, minute: 0, enrollment: '', value: 'oncologia', label: 'Oncología', color: getRandomColor() }
];

const Form = () => {
  const [selectedSpeciality, setSelectedSpeciality] = useState(null);
  const handleChangeEnrollment = (value, id) => {
    let index = selectedSpeciality.findIndex(el => el.id === id);
    const data = [...selectedSpeciality];
    data[index].enrollment = value;
    setSelectedSpeciality(data);
  }
  return (

user_2938073 · Answer

The problem is that you are using Fragment with uuid, which create a new instance at each render.
This results in rendering the whole part again and losing focus.

You need to remove Fragment or use any other consistent key value for each element in map.

Without Fragment

See: https://codesandbox.io/s/lucid-field-crolh?file=/src/App.js

import React, { useState, Fragment } from "react";
import uuid from "react-uuid";
import styled from "styled-components";
import Select from "react-select";

import { Grid, TextField, Box } from "@material-ui/core";

export const StyleWrapper = styled.div`
  .MuiInputBase-root {
    font-size: 24px;
    font-weight: 600;
    color: #061655;
  }
`;

const dot = (color = "#ccc") => ({
  alignItems: "center",
  display: "flex",

  ":before": {
    backgroundColor: color,
    borderRadius: 10,
    content: '" "',
    display: "block",
    marginRight: 4,
    marginLeft: 8,
    height: 10,
    width: 10
  }
});

const colourStyles = {
  control: (styles) => ({ ...styles, backgroundColor: "white" }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    return {
      ...styles,
      backgroundColor: isDisabled
        ? null
        : isSelected
        ? data.color
        : isFocused
        ? "000000"
        : null,
      color: isDisabled
        ? "#ccc"
        : isSelected
        ? "000000" > 2
          ? "white"
          : "black"
        : "000000",
      cursor: isDisabled ? "not-allowed" : "default",

      ":active": {
        ...styles[":active"],
        backgroundColor: !isDisabled && (isSelected ? "000000" : "000000")
      },
      borderRadius: "10px"
    };
  },
  placeholder: (styles) => ({ ...styles, ...dot() }),
  multiValue: (styles, { data }) => ({
    ...styles,
    ...dot(data.color),
    borderRadius: "40px"
  }),
  multiValueLabel: (styles) => ({
    ...styles,
    color: "#061655",
    fontWeight: 500
  }),
  multiValueRemove: (styles, { data }) => ({
    ...styles,
    color: "#061655",
    padding: "8px 8px 8px 4px",
    ":hover": {
      backgroundColor: "#transparent",
      color: "#061655",
      cursor: "pointer",
      borderRadius: "0px 40px 40px 0px"
    }
  })
};

const FormAddProfessional = (props) => {
  const [selectedSpeciality, setSelectedSpeciality] = useState(null);

  const optionsSpeciality = [
    {
      id: 1,
      hour: 0,
      minute: 0,
      enrollment: "",
      value: "ac.terapeutico",
      label: "Ac. Terapéutico"
    },
    {
      id: 2,
      hour: 0,
      minute: 0,
      enrollment: "",
      value: "kinesiologia",
      label: "Kinesiología"
    },
    {
      id: 3,
      hour: 0,
      minute: 0,
      enrollment: "",
      value: "oncologia",
      label: "Oncología"
    }
  ];

  const handleChangeEnrollment = (value, id) => {
    let index = selectedSpeciality.findIndex((el) => el.id === id);
    const data = [...selectedSpeciality];
    data[index].enrollment = value;
    setSelectedSpeciality(data);
  };

  return (
    
      
        
          
            
               "No hay más opciones"}
              />
            
            {selectedSpeciality &&
              selectedSpeciality.map((el) => (
                
                  
                    
                        handleChangeEnrollment(e.target.value, el.id)
                      }
                      label={`MATRÍCULA ${el.label.toUpperCase()}`}
                    />
                  
                
              ))}
            {console.log(selectedSpeciality)}
          
        
      
    
  );
};

export default FormAddProfessional;

Onchange stops for every letter I type

1 Answers

Without Fragment

With different consistent key value