ainneo
January 8, 2020, 9:18pm
1
Hello,
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.
https://bitcoin-world-news.netlify.com/
try this with your array of news articles
let filteredArticles = articles.filter((article, index, self) =>
index === self.findIndex((t) => t.title === article.title))
ainneo
January 9, 2020, 10:32pm
3
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:
NewCard.js
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>
<h3>{props.title}</h3>
<p>{props.description} <a className="aColor" href={props.url}>Read More</a></p>
<p>{props.publishedAt}</p>
</div>
)
}
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));
}, []);
return(
<div className="cardWrapper">
{news.map((item, index) => <NewsCard key={index} props={item} />)}
</div>
</div>)
}
export default NewsContainer
link to my site: https://bitcoin-world-news.netlify.com/
did you try something like this? give this a try if not
useEffect(() => {
getNews().then(data => {
data = data.filter((article, index, self) =>
index === self.findIndex((t) => t.title === article.title))
setNews(data)
});
}, []);
1 Like
ainneo
January 9, 2020, 11:13pm
5
biscuitmanz you rule man!!! Thank you… I almost had it right… but left a few parts out… THANK YOU!
1 Like