Optimize code for two similar states in react - reactjs

Question

I have two similar states in React:
const [bareLong, setBareLong] = useState([
["2", "14"],
["1", "16"],
]);
const [bareTrans, setBareTrans] = useState([
["2", "14"],
["1", "16"],
]);
function addBareLong() {
setBareLong(function (prevBareLong) {
const newArr = [...prevBareLong, ["2", "14"]];
return newArr;
});
}
function addBareTrans() {
setBareTrans(function (prevBareLong) {
const newArr = [...prevBareLong, ["2", "14"]];
return newArr;
});
}
Functions addBareLong() and addBareTrans() will be added on two buttons.
How can I simplify this code? I think I copy-paste too much.

Answer 1

you can do it in one state
the state is object like
const [bareState, setBareState] = useState({
bareLong: [
["2", "14"],
["1", "16"]
],
bareTrans: [
["2", "14"],
["1", "16"]
]
});
function addBareLong() {
setBareState(prevState => {
return {
...prevState,
bareLong: [...prevState.bareLong, ["2", "14"]]
};
});
}
function addBareTrans() {
setBareState(prevState => {
return {
...prevState,
bareTrans: [...prevState.bareTrans, ["2", "14"]]
};
});
}
```
this is the first solution what i prefer or you can use this:
```
function addNewItem(prevState, setState) {
setState(prevState => [...prevState, ["2", "14"]]);
}
function addBareLong() {
addNewItem(bareLong, setBareLong);
}
function addBareTrans() {
addNewItem(bareTrans, setBareTrans);
}
```