What's the proper way, using TypeScript and React, to create a function that pushes a new object inside the array items ?
const [state, setState] = useState([
{
firstname: "William",
items: [
{ name: "sword", damage: 100 },
{ name: "shield", damage: 50 },
],
},
{
firstname: "Allison",
items: [
{ name: "bow", damage: 70 },
{ name: "axe", damage: 120 },
],
},
]);
const addNewItem = (newItem: object, CharacterIndex: number) => {
// Push new item inside character's items.
setState(newState)
};
return (
<button onClick={() => addNewItem({ name: "dagger", damage: 50 }, 2)}>
Add Item
</button>
);
I have already done once using JavaScript, but with Typescript I often get some errors.
You can Implement it the way you see it fits best.
const addNewItem = (newItem: object, CharacterIndex: number) => {
//I would use this
setState(state.map((elem: object, index: number) => {
return index === characterIndex
? { ...elem, items: [ ...elem.items, newItem ] }
: elem;
}));
};
You should type your state and all your arrays
import { useState } from "react";
import "./styles.css";
const INITIAL_STATE = [
{
firstname: "William",
items: [
{ name: "sword", damage: 100 },
{ name: "shield", damage: 50 }
]
},
{
firstname: "Allison",
items: [
{ name: "bow", damage: 70 },
{ name: "axe", damage: 120 }
]
}
];
type Item = {
name: string;
damage: number;
};
type StateParams = {
firstname: string;
items: Item[];
};
export default function App() {
const [state, setState] = useState<StateParams[]>(INITIAL_STATE);
const addNewItem = (newItem: Item, characterIndex: number) => {
const nextState = state.map((st, i) => {
if (i === characterIndex) {
return {
firstname: st.firstname,
items: [...st.items, newItem]
};
} else {
return st;
}
});
setState(nextState);
console.log(state);
};
return (
<button onClick={() => addNewItem({ name: "dagger", damage: 50 }, 1)}>
Add Item
</button>
);
}