Я сделал ваше намерение, работая здесь: https://codesandbox.io/s/l2lqm76z0q
Как указывал Крис, путь состоит в использовании состояния реакции.Поэтому я ввел состояние с выбранным по умолчанию элементом 4 и создал функцию handleClick, которая должна срабатывать при нажатии на один элемент на боковой панели.Оба они были созданы в App.js:
state = {
selected: 4
};
handleClick = id => {
this.setState({ selected: id });
};
Теперь я перенес функцию handleClick туда, где это необходимо, в данном случае в Sidebar.js:
<Sidebar onClick={this.handleClick} />
Итекущий выбранный элемент должен быть перенесен в ваш контент (опять же, где это необходимо).
<Content selected={this.state.selected} />
На боковой панели я снова отправляю функцию handleClick дочернему элементу CardOverview со связанным идентификатором (*):
<CardOverview
image={cloudImage}
name="Cloud Strife"
onClick={() => this.props.onClick(1)}
/>
И, наконец, в CardOverview мы используем функцию, которую мы передали по дороге:
<section className="card-overview" onClick={this.props.onClick}>
...
</section>
(работает она или нет, мы видим в консоли- при нажатии на элемент он должен показывать состояние с текущим выбранным идентификатором элемента.)
Теперь в content.js мы используем значение selected и передаем его в CardDetailed, где мы его используем.следующим образом:
// Grab the 'characters' object from App.js, and assign it to 'this.props'
const { characters, selected } = this.props;
// Filter the chracters and return only whose 'id' belongs to that of the selected one
const filteredCharacters = characters
.filter(character => character.id === selected)
.map(character => (
<div className="characters" key={character.id}>
<p>Name: {character.Name}</p>
<p>Job: {character.Job}</p>
<p>Age: {character.Age}</p>
<p>Weapon: {character.Weapon}</p>
<p>Height: {character.Height}</p>
<p>Birthdate: {character.Birthdate}</p>
<p>Birthplace: {character.Birthplace}</p>
<p>Bloodtype: {character.Bloodtype}</p>
<p>Description: {character.Description}</p>
</div>
));
...
Вот и все.
(*) Знайте, я не улучшил ваш код, я просто заставил его работать.Я вижу несколько вопросов, которые вы должны решить.Например, нет необходимости перечислять все символы на боковой панели вручную.Я бы предложил создать файл, содержащий ваш список символов, и использовать его на боковой панели и в контенте.Таким образом, вы сократите свой код и сохраните список символов (и всю относящуюся к нему информацию, такую как идентификатор) в одном файле.