Если данные из props не передаются при клике на кнопку, это может быть вызвано неправильной обработкой события в компоненте. Возможно, при клике на кнопку не вызывается соответствующая функция с передачей необходимых данных из props. Проверьте, что обработчик клика на кнопку корректно передает данные из props.
Чтобы улучшить структуру кода для передачи id карточки из компонента CharList в родительский компонент App и использовать его в компоненте CharInfo, можно применить следующий подход:
1. В компоненте CharList при клике на карточку вызывается функция handleClick, которая в свою очередь вызывает функцию onUpdateSelectedCharacter в родительском компоненте App и передает туда id выбранной карточки:
```javascript
const CharList = ({ characters, onUpdateSelectedCharacter }) => {
const handleClick = (id) => {
onUpdateSelectedCharacter(id);
};
return (
<div>
{characters.map(character => (
<div key={character.id} onClick={() => handleClick(character.id)}>
{character.name}
</div>
))}
</div>
);
};
```
2. В родительском компоненте App создается состояние selectedCharacterId, в котором будет храниться id выбранной карточки. Также создается функция updateSelectedCharacter, которая принимает id и устанавливает его в состояние selectedCharacterId:
```javascript
const App = () => {
const [selectedCharacterId, setSelectedCharacterId] = useState(null);
const updateSelectedCharacter = (id) => {
setSelectedCharacterId(id);
};
return (
<div>
<CharList characters={characters} onUpdateSelectedCharacter={updateSelectedCharacter} />
<CharInfo selectedCharacterId={selectedCharacterId} />
</div>
);
};
```
3. В компоненте CharInfo используйте selectedCharacterId для запроса данных с сервера и их отображения:
```javascript
const CharInfo = ({ selectedCharacterId }) => {
// Запрос данных с сервера по selectedCharacterId и отображение информации о персонаже
};
```
Таким образом, при клике на карточку в компоненте CharList будет передаваться id выбранной карточки в родительский компонент App, где его можно использовать для получения данных с сервера в компоненте CharInfo. Дополнительных изменений, кроме описанных выше, не требуется.