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>
);
};
Source: stackoverflow.com
Related Query
- React Insert/Remove Row In Array Problem Not Updating
- setState not working for updating an array in React
- React not updating state with setState with Array of object
- MobX not updating React view when pushing to an array
- Why is array not updating after sorting in React Hooks?
- React useState, setState in useEffect not updating array
- React useReducer not updating object in array
- React setState not updating reduced array
- React useState() array not updating
- React updating when array filters but not when an element is added
- React Hooks & UseEffect not updating display with socketIO data. Only renders elements in array
- React useState not updating array of objects
- State not updating on removing value from array in React JSX funcntional component
- React hooks updating array is not working
- React updating data of an array but changes not appears
- Having problem with State not updating in React
- useState on React Hooks not updating Array
- React functional component is not rendering when updating the Sate after pushing data to array
- Saving to LocalStorage Array not updating correctly React
- Problem with updating object property in array of objects in React
- React Dom not updating after updating a state array
- React Native - Text not updating with array value
- React array state is not updating
- React - setState not updating array
- react date array not updating after setting state
- Child componenet not updating when parent component is updating its array in react
- React UseEffect not updating when information is deleted from array
- Array of objects in state not updating correctly in React app
- React redux, array state not updating
- React Hooks not updating array correctly
More Query from same tag
- Custom Middleware error even after implemented
- Reactjs promise.all order of calls
- Axios POST to server returns empty string
- Why my colors is not output on the screen under a rafce react environtment
- Is there a way I can close Modal without using the default Buttons on ANTD?
- React: access data-attribute in <option> tag
- How do I include a namespace with a react tsx import?
- Adding Marker to Google Maps in google-map-react
- Dinamic import to JSON file in react component
- Passing state in function inside React functional component
- How to change component order while keeping state?
- How to create a loader component in Reactjs
- React Hooks: is rendering always completed after setState + setTimeout?
- How to map an array of objects in React
- Source of Img should be dynamic
- react-to-pdf between two components
- React showing previous state
- Converting 2d array to Object
- How to correctly catch change/focusOut event on text input in React.js?
- Conditionally render useEffect fetch React
- File uploading with Express: req.files is undefined
- React component self close on button click
- how to call an element which has '@' on it in typescript?
- Lazy loading pages with BrowserRouter Lazy and Suspense
- Generic button component in reactjs
- value problem received , empty object Axios/Post/bdd ReactJS
- what type to give ref in React/TypeScript?
- Bootstrap vs Material UI for React?
- Handling BackHandler
- How can i add more searchable options to React-Select?