How to push an object inside nested array using React and TypeScript?-CodePudding

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.

CodePudding user response：

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;
    }));
};

CodePudding user response：

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>
  );
}