Есть код, который выводит посты и по клику на пост показывает его полное содержимое.
import React from "react";
type respX = {
"id": any,
"userId": any,
"title": any,
"body": any,
}
interface PropsI {
}
interface StateI {
data: respX[];
changedBody: string
changedTitle: string
}
export class ComponentPostList extends React.Component<PropsI, StateI> {
state: StateI = {data: [], changedBody: '', changedTitle: 'Click to choose article'}
async getPostById(id: any) {
const myResponse = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const myJson = await myResponse.json();
this.setState({changedBody: myJson.body, changedTitle: myJson.title});
}
async componentDidMount() {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/`);
const json = await response.json();
this.setState({data: json});
}
render() {
return (
<div className="About">
<div className="content">
<div className="title">{this.state.changedTitle}</div>
<div className="article">{this.state.changedBody}</div>
</div>
{this.state.data.map(el => (
<li onClick={e => this.getPostById(el.id)} key={el.id}>
{el.title}
</li>
))}
</div>
);
}
}
Как правильно передать данные из одного компонента в другой? Чтобы рендер заголовков постов был в одном компоненте,а уже полное содержимое поста в другом компоненте. Эти компоненты находятся на одном уровне:
<ComponentPostList data={data} onClick=(getPostById) />
<ComponentArticle post={post} />