function handleValueChange()

in source/ui/src/views/ConnectionForm.tsx [120:157]
33 lines of code
9 McCabe index (conditional complexity)

  function handleValueChange(event: React.ChangeEvent<FormControlElement>): void {
    const { id } = event.target;
    let value: any = event.target.value;
    const copiedConnection = copyObject(connection);

    if (id.startsWith('sendDataTo')) {
      const { checked } = event.target as HTMLInputElement;
      value = checked;
    }

    // To prevent same ID from different protocols, OPC UA has prefix.
    let opcUaId: string | undefined;
    if (id.startsWith('opcUa')) {
      opcUaId = id.split('-').pop() as string;
    }

    if (opcUaId ? setValue(copiedConnection.opcUa, opcUaId, value) : setValue(copiedConnection, id, value)) {
      setConnection(copiedConnection);

      // Since `listTags` and `tags` need to be built to the array, it does not check the validation in real time.
      if (!['listTags', 'tags'].includes(id)) {
        const newErrors = validateConnectionDefinition(copiedConnection);

        if (id.toLowerCase().endsWith('machineip') || id.toLowerCase().endsWith('servername')) {
          const newId = opcUaId ? `opcUa_${opcUaId}` : `opcDa_${id}`;
          setErrors({
            ...errors,
            [newId]: newErrors[newId]
          });
        } else {
          setErrors({
            ...errors,
            [id]: newErrors[id]
          });
        }
      }
    }
  }