title: How to transfer data from one component to another in react?
body: <p>There is a code that displays posts and by clicking on a post shows the full content of this post.</p>
  
  <pre><code>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&lt;PropsI, StateI&gt; {
  
      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 (
              &lt;div className="About"&gt;
                  &lt;div className="content"&gt;
                      &lt;div className="title"&gt;{this.state.changedTitle}&lt;/div&gt;
                      &lt;div className="article"&gt;{this.state.changedBody}&lt;/div&gt;
                  &lt;/div&gt;
                  {this.state.data.map(el =&gt; (
                      &lt;li onClick={e =&gt; this.getPostById(el.id)} key={el.id}&gt;
                          {el.title}
                      &lt;/li&gt;
                  ))}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>How to transfer data from one component to another? To render the post headers in one component, and already the full content of the post in another component. These components are on the same level:</p>
  
  <pre><code>  &lt;ComponentPostList data = {data} onClick = (getPostById) /&gt;
    &lt;ComponentArticle post = {post} /&gt;
  </code></pre>