Skip to content

Instantly share code, notes, and snippets.

@mambodin
Created August 8, 2020 06:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mambodin/4b626051ee37afd8c7e2f0d8b7d21d94 to your computer and use it in GitHub Desktop.
Save mambodin/4b626051ee37afd8c7e2f0d8b7d21d94 to your computer and use it in GitHub Desktop.
import React, { useState, useEffect } from 'react';
import News from './News'
import '../Css/Project.css'
const Project = () => {
let [newsData, setNewsData] = useState([])
let [country, setCountry] = useState('')
let [query, setQuery] = useState('')
let queryChange = (e) => {
setQuery(e.target.value)
}
let submitQuery = ()=> {
pullData(query)
setQuery('')
}
let pullData = async (q) => {
let data = await fetch('https://newsapi.org/v2/everything?' +
`q=${q}&` +
'apiKey=643ef24572b44968b5a633e48cc5d856')
let dataJson = await data.json()
setNewsData(dataJson.articles)
}
let pullHeadlines = async (country) => {
let data = await fetch('https://newsapi.org/v2/top-headlines?' +
`country=${country}&` +
'apiKey=643ef24572b44968b5a633e48cc5d856')
let dataJson = await data.json()
console.log(dataJson)
setNewsData(dataJson.articles)
}
let selectHandler = () =>{
}
useEffect(() => {
pullHeadlines('sg')
}, [])
return (
<div>
<div className="headlines">
<h1>All of today's news</h1>
Search: <input type="text" onChange={queryChange} value={query}></input>
Country: <select onChange={selectHandler}>
<option val="US" >US</option>
</select>
<button onClick={submitQuery}>Search</button>
</div>
{
!newsData ? '' : newsData.map((news) => {
return (
<News title={news.title}
description={news.description}
key={news.title}
urlToImage={news.urlToImage}
url={news.url}
published={news.publishedAt}
/>
)
})
}
</div>
);
}
export default Project;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment