Conditionally render content from API response in Reactjs component

Question

I make an API request and get a response (news articles) where I would like to render a few items from the response. eg (article title, article description etc)

I store the response in state, and state by default is null.

I would like to have logic that allows me to render these items in an li tag, I understand to do this through the .map function but I'm not sure where and how to add the logic to get my desired outcome.

I've attempted a few things with a ternary operation but I can't seem to implement it without errors and/or incorrect placement.

I would render these items in the ul of the ArticleSilo

Here is my component with some logic I attempted.

import React, { Component } from "react";

import classes from "./News.css";

import Axios from "axios";
import Aux from "../../hoc/Aux";

class News extends Component {
  state = {
    articles: null,
    tell: false
  };

  clickHandler = e => {
    Axios.get(
      "https://newsapi.org/v2/top-headlines?sources=" +
        e.target.getAttribute("source-link") +
        "&apiKey=e5da89b57ee347a1a1da306427dc5fa7"
    )
      .then(res => {
        this.setState({ articles: res.data.articles });
      })
      .catch(err => {
        console.log(err);
      });
  };

  render() {
    let articles = this.state.articles.map(aKey => {
      let title = aKey.title;
      let desc = aKey.description;
      <li>
        <p>Title: {title}</p>
        <p>Description: {desc}</p>
      </li>;
    });

    return (
      <Aux>
        <div className={classes.SidePanel}>
          <div className={classes.Heading}>News Sources</div>

          <ul className={classes.List}>
            <li onClick={this.clickHandler} source-link="polygon">
              Polygon
            </li>
            <li onClick={this.clickHandler} source-link="tech-rader">
              TechRadar
            </li>
            <li onClick={this.clickHandler} source-link="hacker-news">
              Hacker News
            </li>
            <li onClick={this.clickHandler} source-link="national-geographic">
              National Geographic
            </li>
            <li onClick={this.clickHandler} source-link="ars-technica">
              Ars Technica
            </li>
            <li onClick={this.clickHandler} source-link="breitbart-news">
              Breitbart News
            </li>
            <li onClick={this.clickHandler} source-link="crypto-coins-news">
              Crypto Coins News
            </li>
            <li onClick={this.clickHandler} source-link="the-verge">
              The Verge
            </li>
            <li onClick={this.clickHandler} source-link="the-next-web">
              The Next Web
            </li>
          </ul>
        </div>

        <div className={classes.ArticleSilo}>
          <ul>{articles}</ul>
        </div>
      </Aux>
    );
  }
}

export default News;

Answer 1

render() {
  return (
   <Aux>
    <div className={classes.SidePanel}>
      <div className={classes.Heading}>News Sources</div>

      <ul className={classes.List}>
        <li onClick={this.clickHandler} source-link="polygon">
          Polygon
        </li>
        <li onClick={this.clickHandler} source-link="tech-rader">
          TechRadar
        </li>
        <li onClick={this.clickHandler} source-link="hacker-news">
          Hacker News
        </li>
        <li onClick={this.clickHandler} source-link="national-geographic">
          National Geographic
        </li>
        <li onClick={this.clickHandler} source-link="ars-technica">
          Ars Technica
        </li>
        <li onClick={this.clickHandler} source-link="breitbart-news">
          Breitbart News
        </li>
        <li onClick={this.clickHandler} source-link="crypto-coins-news">
          Crypto Coins News
        </li>
        <li onClick={this.clickHandler} source-link="the-verge">
          The Verge
        </li>
        <li onClick={this.clickHandler} source-link="the-next-web">
          The Next Web
        </li>
      </ul>
    </div>
    <div className={classes.ArticleSilo}>
      <ul>
        {this.state.articles.map(article => (        
          <li>
            <p>Title: {article.title}</p>
            <p>Description: {article.desc}</p>
          </li>
         )
        }
      </ul>
    </div>
    </Aux>
  );
}