如何使用ReactJS更新内容

Question

I'm new in React and I trying to build a simple list of items clickable to get data and update the DOM, I have a list of links on render()

 const listNews = this.state.news.map((item, i) => 
        <ListGroupItem  key={i} className="font-size-1 text-left">
            <a href='#' onClick={() => this.getInfoNews(i)}>{item.title}</a>
        </ListGroupItem>  
  );

the function "getInfoNews(i)" have this piece of code to display the data into DOM

getInfoNews(i){
    var content = {
        news : this.state.news[i]
      }

      console.log(content.news)

  if(content.news === undefined){
      return (
          <Card>
              <CardBody>
                  <CardTitle>Card Title</CardTitle>
                  <CardSubtitle>Card subtitle</CardSubtitle>
                  <CardText>Some quick example text to build on the card title and card's content.</CardText>               
              </CardBody>
          </Card>
        )
  }else{
       return (
          <Card>
            <CardBody>
                <div className="container">
                    <img src={content.news.urlToImage} className="w-100" />
                    <CardTitle>
                      <div className="bottom-left font-size-2 bg-dark w-50 p-2 text-uppercase text-left">{content.news.title}</div>
                    </CardTitle> 
                </div>
                <CardSubtitle className="text-right text-dark font-size-1 mr-4">
                    by {content.news.author ? content.news.author : "Anonymous"} , published at {content.news.publishedAt}
                </CardSubtitle>
                <CardText className="text-dark font-size-2 mt-4">
                  {content.news.description} <a href={content.news.url} target="_blank">read more</a> 
                </CardText>
            </CardBody>
          </Card>
        )
  }

}

Work perfect on load first time, but dont work once clicked on every link, the data is loaded but the DOM dont update, some one can help me ? thanks!

Answer 1

React re-renders whenever there is an update to either the state or the props .

For example, you can load new data from API, and then do this.setState to update the component state . Then, react will re-render the component automatically.