1

I have a component where user can create a company with some information like company name, company branch name etc. In this component I have two tabs one is company information and other is branch information. If user trying to create a new company with branch there is no error. I have a component where I am showing "company list". I added link on company name where it will take the user to the edit page so user can edit the existing data and update it. When user go to edit page and switch to new create page where you can create a new company with branch, here getting the below error when switching to branch tab:

TypeError: Cannot add property 0, object is not extensible
app/main/apps/setup/auction-company/AuctionBranchTab.js:18

  15 | if (branches?.length > 0)
  16 |  setInForm('branches', branches);
  17 | else {
> 18 |  branches.push({index: 0});
     | ^  19 |  setInForm('branches[0]', {index: 0});
  20 | }
  21 | setIndex(branches.length - 1); 

Here is the component code:

function AuctionBranchTab(props) {
    const { formRef, handleChange, setInForm, branches } = props;
    const [index, setIndex] = useState(branches?.length > 0? branches.length - 1 : 0);

    useEffect(() => {
        if (branches?.length > 0)
            setInForm('branches', branches);
        else {
            branches.push({index: 0});
            setInForm('branches[0]', {index: 0});
        }
        setIndex(branches.length - 1);
    }, []);

    const addBranch = () => {
        branches[branches.length] = {index: branches.length};
        setIndex(branches.length - 1);
        setInForm('branches', branches);
    };
    const removeBranch = () => {
        let confirmation = confirm(`Remove Branch ${formRef?.branches?.length}?`);
        if (confirmation) {
            setIndex(index-1);
            let newBranch = branches.slice(0, -1);
            setInForm('branches', newBranch);
        } else {
            alert('cancelled');
        }
    };

0 Answers0