I have an object which i want to update it using React Hooks
const [rowEdit, setRowEdit] = useState({ rowEdit: { "1x0": [1, 1, 1, 1, 1] } });
I loop through the array with .map, so i have the index for each element. How can i make the second value equal to 0?
You can return 0 if the map index is equal to 1, or return the current element otherwise.
Example
const { useState } = React;
function App() {
const [rowEdit, setRowEdit] = useState({
rowEdit: { "1x0": [1, 1, 1, 1, 1] }
});
function onClick() {
setRowEdit(prevState => ({
...prevState,
rowEdit: {
...prevState.rowEdit,
"1x0": prevState.rowEdit["1x0"].map((row, index) =>
index === 1 ? 0 : row
)
}
}));
}
return (
<div>
<button onClick={onClick}>update row</button>
<div>{JSON.stringify(rowEdit)}</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>It's unclear if you want to do this for all keys in the object, but I'm going to assume you do:
setRowEdit(rows => Object.entries(rows).reduce((obj, [rowId, row]) => ({
...obj,
[rowId]: row.map((col, i) => i === 1 ? 0 : col),
}), {}));
Otherwise:
setRowEdit(rows => ({
...rows,
'1x0': rows['1x0'].map((col, i) => i === 1 ? 0 : col),
}), {}));
