score:0

you should use setsinglesizing function to update your state. you should not mutate your state directly as in your updatesinglesizing function. also you are returning a boolean by using the === operator. try something like this (i am not impelmenting your array logic.)

onchange={(e) => setsinglesizing(e.target.value)}

score:1

the singlesizing object is not updated when the text changes from the textfield's onchange event. the updatesinglesizing function just returns the new values but it doesn't update the singlesizing object.

so we need a function to update the singlesizing object. the ontextchange function updates the singlesizing object (more about spread syntax) when the textfield text changes.

    const ontextchange = (e) => {
    const id = e.target.id;
    const value = e.target.value;
    setsinglesizing({
      ...singlesizing,
      [id]: value
    });
  };

and the textfields updated with id property to update the actual property of singlesizing object.

          <sizingtextfields
            id="taxonomyid"
            val={singlesizing.taxonomyid}
            label={"taxonomy id"}
          />
          <sizingtextfields
            id="domain"
            val={singlesizing.domain}
            label={"domain"}
          />
          <sizingtextfields
            id="experience"
            val={singlesizing.experience}
            label={"experience"}
          />
....

also, the textfield's select property expects child component and options. so the sizingtextfields function updated with child component.

const sizingtextfields = ({
    id,
    val,
    label,
    disabled,
    select = false,
    options = []
  }) => {
    return select ? (
      <textfield
        id={id}
        value={val}
        label={label}
        variant="outlined"
        onchange={ontextchange}
        style={{ margin: "1em", minheight: "1em", minwidth: "15em" }}
        select
        selectprops={{
          native: true
        }}
        disabled={disabled}
      >
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </textfield>
    ) : (
      <textfield
        id={id}
        value={val}
        label={label}
        variant="outlined"
        onchange={ontextchange}
        style={{ margin: "1em", minheight: "1em", minwidth: "15em" }}
        disabled={disabled}
      />
    );
  };

the updated codesandbox

edit so-72375315-answer


Related Query

More Query from same tag