Está criando um novo item nesse objeto porque foi assim escrito no código um nome totalmente diferente dos outros e assim ele copia as chaves existentes e cria um id com o valor já mencionado.
O que necessita é o mais básico possível com essa mudança:
function Mudar(key) {
setActive((prevState) => {
return { ...prevState, [key]: true };
});
}
No momento da criação dos card
, precisa recuperar o nome dessa chave e passar na função como não foi mencionado a função ou rotina que cria esses card
talvez fique incompleta nesse aspecto.
Um código exemplo sem saber do seu:
function Card({name, status, click}) {
return (
<div>
{name} - {status ? 'true': 'false'}
{!status && (<button onClick={click}>Alterar</button>)}
</div>
)
}
function App() {
const [active, setActive] = React.useState({
card1: false,
card2: false,
card3: false,
card4: false,
card5: false,
card6: false,
card7: false,
});
function changeCard(key) {
setActive((prevState) => {
return {...prevState, [key]: true};
});
}
return (
<div>
{Object.entries(active).map((d,i) =>
<Card
name={d[0]} key={i}
status={d[1]}
click={e => changeCard(d[0])}
/>)
}
</div>
)
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>
Essa maneira como está proposto na sua pergunta não é o ideal, porque, um objeto com várias chaves que são diferentes pelo nome deveria ser um array
de objetos, um exemplo modificado com a realidade da maioria dos desenvolvimentos para react:
function Card({name, status, click}) {
return (
<div>
{name} - {status ? 'true': 'false'}
{!status && (<button onClick={click}>Alterar</button>)}
</div>
)
}
function App() {
const [active, setActive] = React.useState([
{name: 'card1', status: false},
{name: 'card2', status: false},
{name: 'card3', status: false},
{name: 'card4', status: false},
{name: 'card5', status: false},
{name: 'card6', status: false},
{name: 'card7', status: false},
]);
function changeCard(obj) {
setActive((prevState) => {
return [...prevState.map(a => {
if (a.name === obj.name) {
return {...a, status: true};
}
return a;
})];
});
}
return (
<div>
{active.map((d,i) =>
<Card
name={d.name} key={i}
status={d.status}
click={e => changeCard(d)}
/>)
}
</div>
)
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>
dessa forma o objeto com a propriedade name
é a chave unica desse objeto no array
para alterações, remover etc, poderia até ser um identificação numérica, mas, é o suficiente para a demonstração onde a lista de valores as operações são mais simples.