e.target.disabled = true doesn’t work if a useState Hook is present in the same function

Published

I have two tables next to each other. The table to the left contains an add button that passes content from the left table to the right table.

Once this process is done, the button must become disabled and it should inherit a different style from a different class.

const [recordsRight, setRecordsRight] = useState([]);

<TableBody className = "leftTable">
    {
        recordsLeft === null ?
        []
        :
        recordsLeft.map((item, index) => (
            //<TableCell></TableCell> //Table Contents
            <button className="addToggle" id={"addToggle" + index} onClick={(e) => handleAddSwitch(e, item)}>
                <CircleCheckIcon />
                Add
            </button>
        ))
    }
</TableBody>

<TableBody className = "rightTable">
    {
        recordsRight === null ?
        []
        :
        recordsRight.map((item, index) => (
            //<TableCell></TableCell> //Same Table Contents
        ))
    }
</TableBody>

function handleAddSwitch(e, item) {
    e.target.disabled = true;
    e.target.className = "addToggle2";
    
    let newRecordsRight = [...recordsRight];
    newRecordsRight.push(item);
    setRecordsRight(newRecordsRight);
    
}

.addToggle{
    background: green;
}

.addToggle2{
    background: grey;
}

when I remove the setRecordsRight line from the handleAddSwitch function, the color of the button changes and it becomes disabled.

But once I add it again, the process stops working and I would be able to add the same item from left to right over and over again. What should I do?

Source: Angular Questions

Published
Categorized as angular, css, html, javascript, reactjs Tagged , , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq