21 - Creating components News and NewsItem for fetching JSON Response(Part A)

 Objective -  Write code for components News and NewsItem  for iterating data of JSON response generated from API



STEPS  WE USED

1-  Create two files News.js  and NewsItem.js in our component folder

Note: Write rce in News.js and NewsItem and the snippet extension will help with the required jsx format 



2- Copy paste Card code from bootstrap and make required customisations for NewsItems.js

-->  class   written as   className

-->  for   written as   htmlFor

-->  tabindex   written as   tabIndex.


IMPORTANT:

 Generating props required in our card ( title, description, imageUrl, newsUrl ) 

We will set values in our card from NewsItem.js which will get its value from JSON response generated i.e articles from NewsItem

In Class components 
--> Constructor is used to manage states (News Component)
--> Props are used to manage variables (NewsItem Component)


Basically,

Articles(JSON Response) --->  News component  ---> NewsItem component


src --> components  -->  NewsItem.js

import React, { Component } from 'react'

export class NewsItem extends Component {
    render() {

        let { title, description, imageUrl, newsUrl } = this.props;

        return (
  <div>

        <div className="card my-4" style={{ width: "18rem" }}>
//The conditional (ternary) operator so if imageUrl is null default image is shown.
<img src={ imageUrl ? imageUrl : "https://www.shutterstock.com/image-vector/man-world-background-600w-327255632.jpg"} className="card-img-top" alt="..." />
        <div className="card-body">
              <h5 className="card-title"> {title} </h5>
              <p className="card-text"> {description} </p>
              <a href={newsUrl} target="_blank" rel="noreferrer" className="btn btn-primary">Read More</a>
          </div>
        </div>

   </div>
        )
    }
}

export default NewsItem



-------------------------------------------------------------

src --> components  -->  News.js


import React, { Component } from 'react'
import NewsItem from './NewsItem';

export class News extends Component {

  articles = [

   {
      "source": {
        "id": null,
        "name": "India.com"
      },
      "author": "Zee Media Bureau",
      "title": "NEP: 59-3 (15) | WI Vs Nepal, ICC World Cup Qualifier Cricket Live Score & Updates: West Indies - Zee News",
      "description": "NEP: 102-5 (24) | WI Vs Nepal, ICC World Cup Qualifier Cricket Live Score & Updates: Nepal Go Past 1",
      "url": "https://zeenews.india.com/cricket/live-updates/live-cricket-score-wi-vs-nep-icc-world-cup-2023-qualifier
-match-9-today-west-indies-vs-nepal-harare-stadium-shai-hope-rohit-paudel-2625120",
      "urlToImage": "https://english.cdn.zeenews.com/sites/default/files/2023/06/21/1225420-wivsnep.jpeg",
      "publishedAt": "2023-06-22T12:22:00Z",
      "content": null
    },
|
| Entire JSON RESPONSE from API Copy pasted
|
|

]



  constructor() {
    super();
    this.state = {
      articles: this.articles,
      loading: false
    }
  }

 
render() {
    return (
      <div className="container my-3">
        <h2>NewsLearn - General</h2>

  <div className="row">
          {this.state.articles.map((element) => {
            return <div className="col md-4" key={element.url}>

    <NewsItem title={element.title} description={element.description} imageUrl={element.urlToImage} newsUrl={element.url} />

  </div>
       }
      )
      }
  </div>
  </div>
    )
  }
}

export default News



Image 1 -  Explaining News and NewsItem components Code\
---------------------------------------------------------

3-   Go to app.js and add your News component in existing code


src --> App.js

import './App.css';
import React, { Component } from 'react'
import Navbar from './components/Navbar';
import News from './components/News';

export class App extends Component {
  render() {
    return (
      <div>

        <Navbar />
        <News />

      </div>
    )
  }
}

export default App


Image 2 -  Final appearance of web site (Project 2 part A)






Comments

Post a Comment