I have a situation where I have X number of cards. Cards can be created and deleted, and represent rows in a database, and so must be able to do individual update actions on themselves (For example, changing their name). For this, I have chosen to represent them as components with their own state. This is causing errors when I delete or add cards, though.
"Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement."
(it isn't caused by an early return afaik though I suppose anything is possible)

there's a component file called getCard that returns JSX html. In that function we have code that says:

let [cardState, setCardState] = useState({card:card, unsaved:false})

someFunctionThatHappensOnClick(){
  setCardState({card:{...card, name:"hi"},unsaved:true})
}
return <div>card properties here</div>

I am gathering that's not the right way to do it, I guess I'm hoping for an easy way to fix it without having to rewrite all the card's code because it's quite complicated