Help? Filter out articles that have same title in a news api call in JavaScript?


In my react news api call, how can I filter out stories with the same title? My code is:
props.title === [...props.title]? []

I have already filtered out any articles that did not have images sucessfully!

Can someone please help? I’ve been trying this for 6 hours and just can’t get it to work.

try this with your array of news articles

 let filteredArticles = articles.filter((article, index, self) =>
 index === self.findIndex((t) => t.title === article.title))

Hi, And thanks for replying… I still can’t figure it out… I tried to add it into my NewsContainer.js file, is this where the data meets the component file… but I am still getting errors.

Here is my code:


import React from 'react';
import './card.css'
// import { getNews } from './news-api';

function NewsCard({ props }){
  return !props.urlToImage? []: (
     <div className="cards">
      <a href={props.url}><img src={props.urlToImage} alt="MIA" /></a>
      <p>{props.description}  <a className="aColor" href={props.url}>Read More</a></p>
export default NewsCard

NewsContainer.js file

import React, { useEffect, useState } from 'react';
import { getNews } from '../news-api';
import NewsCard from './NewsCard.js';
import './card.css'
import Iframe from 'react-iframe'

function NewsContainer() {
  const [news, setNews] = useState([]);

  useEffect(() => {
    getNews().then(data => setNews(data));
  }, []);

    <div className="cardWrapper">
       {, index) => <NewsCard key={index} props={item} />)}

export default NewsContainer

link to my site:

did you try something like this? give this a try if not :slightly_smiling_face:

useEffect(() => {
    getNews().then(data => {
    data = data.filter((article, index, self) =>
     index === self.findIndex((t) => t.title === article.title))

  }, []);
1 Like

biscuitmanz you rule man!!! Thank you… I almost had it right… but left a few parts out… THANK YOU!

1 Like