score:1

i've created a working mock-up in codesandbox here

the main changes are to first update your address model so each item has an id rather than relying on the index.

const addresses = [
  { id: 0, address: "home address 1", type: "home" },
  { id: 1, address: "home address 2", type: "home" },
  { id: 2, address: "work address 1", type: "work" }
];

... then to move your updating code for your address and type to the parent. so you only have your state in one place and you deal with all the updates there.

so your addresslist now looks like this:

const addresslist = props => {
  const [addresses, setaddresses] = react.usestate(props.addresses);

  const handleaddrow = () => {
    setaddresses([
      ...addresses,
      { id: addresses.length, address: "new address", type: "home" }
    ]);
  };

  const handleremoverow = id => {
    const rows = addresses.filter(address => address.id !== id);
    setaddresses(rows);
  };
  const updateaddress = (id, ev) => {
    const rows = addresses.map(item =>
      item.id === id ? { ...item, address: ev.target.value } : item
    );
    setaddresses(rows);
  };
  const updatetype = (id, ev) => {
    const rows = addresses.map(item =>
      item.id === id ? { ...item, type: ev.target.value } : item
    );
    setaddresses(rows);
  };
  return (
    <react.fragment>
      {addresses.map((address, index) => (
        <address
          index={index}
          item={address}
          key={address.id}
          handleaddrow={handleaddrow}
          handleremoverow={handleremoverow}
          updatetype={updatetype}
          updateaddress={updateaddress}
        />
      ))}
    </react.fragment>
  );
};

and your address:

const address = props => {
  const {
    updatetype,
    updateaddress,
    item,
    index,
    handleaddrow,
    handleremoverow
  } = props;
  return (
    <grid container spacing={3}>
      <grid item xs={12} sm={2}>
        <textfield
          id="type"
          label="email type"
          margin="normal"
          value={item.type}
          onchange={ev => updatetype(item.id, ev)}
          fullwidth
          select
        >
          {types.map(option => (
            <menuitem key={option} value={option}>
              {option}
            </menuitem>
          ))}
        </textfield>
      </grid>
      <grid item xs={12} sm={9}>
        <textfield
          id="address"
          label="address"
          margin="normal"
          value={item.address}
          onchange={ev => updateaddress(item.id, ev)}
          fullwidth
          required
        />
      </grid>
      <grid item xs={12} sm={1}>
        {index === 0 ? (
          <iconbutton aria-label="add" onclick={handleaddrow}>
            add
          </iconbutton>
        ) : (
          <iconbutton
            aria-label="delete"
            onclick={() => handleremoverow(item.id)}
          >
            remove
          </iconbutton>
        )}
      </grid>
    </grid>
  );
};

Related Query