Tengo una matriz de usuarios/personas que estoy tratando de mapear. En este caso, simplemente aparecerán en fila, donde se puede hacer clic en ellos, y luego agregará una clase, que simplemente escala el elemento asignado. Sin embargo, el problema es que puedo hacer clic en varios elementos y luego se escalarán individualmente hacia arriba o hacia abajo según el estado de la palanca. Lo que me gustaría hacer es cuando hago clic en uno, todos los demás se reducirán, de modo que solo haya uno escalado a la vez.

Pero no estoy muy seguro de cómo proceder. Mi componente principal y el componente que se está mapeando se ven a continuación. Puedo ver que al colocar el evento de clic en el componente PersonHeader , son independientes entre sí. Pero nuevamente, no estoy seguro de cómo "conectarlos", para que se conozcan entre sí.

Componente principal:

 import { memo, useState } from 'react' import cx from 'clsx' import styles from './person.module.scss' import PersonContent from './person-content/person-content.component' interface IPerson { person: any } const Person = ({ person }: IPerson) => { return ( <> <div className={styles['person-wrapper']} > <div> {Array.isArray(person.users) && person.users.map(user => ( <PersonHeader name={user.name} ></PersonHeader> ))} </div> </div> </> ) } export default memo(Person)

componente persona:

 import { memo, useState } from 'react' import cx from 'clsx' import styles from './person-header.module.scss' interface IPersonHeader { name: string } const PersonHeader = ({ name }: IPersonHeader) => { const [personToggle, setPersonToggle] = useState(false) return ( <> <div onClick={() => setPersonToggle(!personToggle)} className={cx(styles['person'], { [styles['is-active']]: personToggle, })} > <div>{name}</div> </div> </> ) } export default memo(PersonHeader)

CSS:

 .person { display: grid; position: relative; cursor: pointer; transition: transform 0.1s ease-in-out; &.is-active { transform: scale(1.2); transition: transform 0.1s ease-in-out; } }