Как в React, при клике на компонент, перенести текст заголовка этого компонента в заголовок другого компонента

Question

У меня есть несколько компонентов, которые являются карточками пользователей и созданы на основе данных пользователя (аватарка, имя и т.д.). При нажатии на одну из карточек необходимо получить имя пользователя и перенести его в заголовок блока, расположенного ниже.

const Profiles = (props) => {
 return (
    <div className={css.profilesPage}>
      <h2 className={css.title} ref={refTitleProfile}>Profiles</h2>
      <div className={css.variableContent}>
        {props.dataState.usersIndex.map(user => 
        /*из данного компонента нужно получить имя */
        <ProfileComp 
          className={css.profile} 
          use={user} 
          key={user.id}
        />)}
      </div>
      <div className={css.blockMessage}>
        <div className={css.blockUserName}>
          <h3 className={css.userName}>{/*Сюда нужно установить имя*/}</h3>
        </div>
      </div>
    </div>
  )
  )
}

Пробовал поиграться с useState и пропсами, но что-то ни как до меня не дойдет как это реализовать.

Answer 1

Примерно так: Создать состояние const [name, setName] = React.useState('')

Создать обработчик: const handleName = name => setName(name); и передать его в дочерний компонент - handleName={handleName}, а в дочернем - этот обработчик добавить событию onClick: onClick={() => props.handleName(props.user.name)}

В рабочем виде в итоге:

const css = {
  "profilesPage":"",
  "title": "",
  "variableContent": "",
  "blockUserName":"",
  "userName":""
}
const data = {
  "usersIndex": [
    {"profile": "prf", id: 1, "name": "Petr" },
    {"profile": "prf", id: 2, "name": "Ivan" },
  ]
}

const ProfileComp = (props) => 
  <div
    onClick={() => props.handleName(props.user.name)}
  >{props.user.name}</div>;

const Profiles = (props) => {
  const refTitleProfile = React.useRef();
  const [name, setName] = React.useState('')
  
  const handleName = name => setName(name);
  
  return (
    <div className={css.profilesPage}>
      <h2 className={css.title} ref={refTitleProfile}>Profiles</h2>
      <div className={css.variableContent}>
        {props.dataState.usersIndex.map(user => 
          <ProfileComp 
            className={css.profile} 
            user={user} 
            key={user.id}
            handleName={handleName}
          />
        )}
      </div>
      
      <div className={css.blockMessage}>
        <div className={css.blockUserName}>
          <h3 className={css.userName}>{name}</h3>
        </div>
      </div>
      
    </div>
  )
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Profiles dataState={data}/>
);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>

БЛОГ НА HUSL

Как в React, при клике на компонент, перенести текст заголовка этого компонента в заголовок другого компонента

Ответы (1 шт):