Decide

For sure, I'll send you an email.

edit: sent. Thank you again for the help.

I'll stay away from the LLMs for now -- they're largely unhelpful anyway.

The value of those elements needs to be concatenated and displayed to the user. Is that right?

Right. The other components with a single text box seem to work fine, it's the multiple boxes in the phone component, and it's local state, that are confusing me to no end.

I think what you're talking about are Signals from Preact?

Oh, no, when I was talking to Bing it said that the local state interferes with the parent state, so I instead need to bring the parent state into the child. It sort of makes sense? At least the part that local and parent state can interfere with each other makes sense.

If you're still interested we could try writing a couple of basic components that get us part of the way there.

Please, I'm all ears. I have a feeling that your approach will help me a lot.

If there's any links, resources, mental models, or anything that you or anyone else think would be helpful in getting this to work, I'm all ears. Also, since it's pretty obvious that this is an assignment, my limitation is that I cannot use useEffect, and the PhoneComponent has to use 4 inputs.

I've been stuck on this for about a week now, so any help, feedback, insight, or articles I should read would be incredibly appreciated.

Hey, I'm just now seeing this. So, my component hierarchy is something like this:

App

• Form
  • TextInput
  • PhoneInput

The TextInput components are very simple:

import { ErrorMessage } from "../ErrorMessage"; //this function can be used to determine if the error message renders based on criteria

export const FunctionalTextInput = ({
  dataProperty,
  errorMessage,
  placeholder,
  value,
  propertyHandler,
}: {
  dataProperty: string;
  errorMessage: string;
  placeholder: string;
  value: string;
  propertyHandler: (property: string, e: string) => void;
}) => {
  //Object.keys(initialUserData)[0]
  return (
    <>
      <div>
        {dataProperty}:
         propertyHandler(dataProperty, e.target.value)}
        />
      </div>
      
    
  );
};

export const FunctionalTextInput = ({
  dataProperty,
  errorMessage,
  placeholder,
  value,
  propertyHandler,
}: {
  dataProperty: string;
  errorMessage: string;
  placeholder: string;
  value: string;
  propertyHandler: (property: string, e: string) => void;
}) => {
  //Object.keys(initialUserData)[0]
  return (
    <>
      <div>
        {dataProperty}:
         propertyHandler(dataProperty, e.target.value)}
        />
      </div>
      
    
  );
};

The shape of my data is like so:

export type UserInformation = {
  firstName: string;
  lastName: string;
  email: string;
  city: string;
  phone: string[];
};

In my Form Component, I have two functions that work in the TextInput component, but not the PhoneInput component.

const dataHandler = (e: FormEvent) => {
    e.preventDefault();
    userDataHandler(formData);
    setFormData(initialUserData);
  };
const propertyHandler = (property: string, value: string) => {
    setFormData((prevProp) => ({ ...prevProp, [property]: value }));
  };

So, over the past few hours I've been trying to talk to bing about this, and get some answers. After a few hours, I finally think the problem is a conflict of state. It seems like the state I'm using in my PhoneInput component interferes with the state of the parent component. This seems to be the case since when I click submit, my dataHandler function doesn't trigger for the PhoneInput component.

So, I guess now I'm wondering how that works? I've heard of raising state to the parent, but passing state down, not as data, but as actual state, sounds difficult and somewhat complex. I'm wondering how to use this technique, the uses, and how I can determine when to use it. Or, better yet, maybe I'm missing something and the answer is right outside my reach.

The phone input in question:

// This is a component that is used for the phone input
// it wall accept 4 inputs, and "lift" the values to the parent component as a single, unformatted string.

import { ChangeEventHandler, useRef, useState } from "react";
import { ErrorMessage } from "../ErrorMessage";

type TPhoneInputProps = {
  errorMessage: string;
  dataProperty: string;
  higherPhoneState: string[];
  propertyHandler: (property: string, e: string) => void;
};
export const FunctionalPhoneInput = ({
  errorMessage,
  dataProperty,
  higherPhoneState,
  propertyHandler,
}: TPhoneInputProps) => {
  const [phoneState, setPhoneState] = useState(["", "", "", ""]);
  const phoneNumber = [
    useRef(null),
    useRef(null),
    useRef(null),
    useRef(null),
  ];
  const phoneNum0 = phoneNumber[0];
  const phoneNum1 = phoneNumber[1];
  const phoneNum2 = phoneNumber[2];
  const phoneNum3 = phoneNumber[3];
  const phoneChangeController =
    (
      index: 0 | 1 | 2 | 3 //  1 | 2 | 3 | 4,
    ): ChangeEventHandler =>
    (e: React.ChangeEvent) => {
      const length = [2, 2, 2, 1];
      const nextInput = phoneNumber[index + 1];
      const prevInput = phoneNumber[index - 1];
      const maxLength = length[index];
      const value = e.target.value;
      const shouldGoToNextInput =
        maxLength === value.length && nextInput?.current;
      const shouldGoToPrevInput = value.length === 0;
      const newState = phoneState.map((phone, phoneIndex) =>
        index === phoneIndex ? e.target.value : phone
      );
      if (shouldGoToNextInput) {
        nextInput.current?.focus();
      }
      if (shouldGoToPrevInput) {
        prevInput.current?.focus();
      }
      setPhoneState(newState);
      console.log(newState.join(""));
      console.log(dataProperty);

      // Concatenate the new state with e.target.value to get the full phone number
      // const fullPhoneNumber =
      //   newState.slice(0, index).join("") +
      //   e.target.value +
      //   newState.slice(index + 1).join("");
      propertyHandler(dataProperty, newState.join(""));
    };
  return (
<> 
<div>
        Phone:
        <div>
          
          -
          
          -
          
          -
          
        </div>
      </div>

  );
};

Please note that this component is 1000% broken. I was in the process of changing it with Bings suggestions, but it's frustrating getting anything useful out of the thing.

I've used it to help me understand some code concepts and debugging, but over the last two weeks, it went from competent to completely stupid half of the time. It also fails to connect so often, it's unreal.

Thank you 🙏

If you still have any, I'd appreciate one.

Godot is written in GoLang?

This is more than I had hoped for, thank you. I also think you're right, that it'll work for me. I'd very much like to contribute to something good in the world, and knowing that this was an option that I overlooked helps immensely. When I've tried "regular" jobs, I tended to not fit into the setting so well, being that I tend to bring up some philosophical question or ask too many questions in general.

I want to run it down real fast, to be sure I got it all:

1. Go to their site and look for dev credits
2. Contact the people who made the site, and essentially see if I can join them or take on some work with them.
3. If it's not a yes, then ask questions and seek advice.
4. At some point get a gov job for it's benefits.

I do have another question I'm curious about. Can you tell me about how you create your static sites? I've practiced it in the past, but how do you deal with a large amount of repeated elements? Another question is about your study or learning habits. I know we should practice, but getting some insight into how other people do things sometimes yields new information that might work with me.

Of course. I am a bit curious about what GLAM is and any other important terms I can search that can help me find this type of work. Generally, I'm mainly curious about the whole starting process, what to look out for, and how to best approach this area.

Can you tell me the appeal of Arc? I have it, and I've used it, but I just can't seem to "get it".

This is really good advice. I had no idea I about that area of work. It makes sense in hindsight, but having it written out so clearly really gives me some ideas on where to focus. Thank you.