Learn React with TypeScript 3

Rendering the search result

Let's render the data we have got from the repository query:

1. Let's render the repository name with its number of stars, along with its description, under the search form if we have a search result:

return (  <div className="repo-search">    <form ...>      ...    </form>    {repo.id && (      <div className="repo-item">        <h4>          {repo.name}          {repo.stargazers ? ` ${repo.stargazers.totalCount}           stars` : ""}        </h4>        <p>{repo.description}</p>      </div>    )}  </div>);

2. We'll also render the last 5 repository issues:

...<p>{repo.description}</p><div>  Last 5 issues:  {repo.issues && repo.issues.edges ? (    <ul>      {repo.issues.edges.map(item => (        <li key={item.node.id}>{item.node.title}</li>      ))}    </ul>  ) : null}</div>

3. If a problem has occurred, let's render ...