javascript - Component rendering -

i have tag component accepts param (a bookid) , retrieves related tags particular book.

class tags extends component {     constructor(props) {         super(props);         this.state={             tags: '',             bookid: ''         };     }     componentdidupdate(prevprops, prevstate) {         if(prevstate.bookid===this.props.bookid) {             console.log(prevstate);             console.log(this.state);             return;         }          var uri='http://api/book/tagsbybookid/'+this.props.bookid;         console.log(uri);          fetch(uri)             .then(response => {                 return response.json();             })             .then(json => {                 console.log(json);                 this.setstate({                     tags: json.out,                     bookid: this.props.bookid                  });             });     }      render() {         let tags=this.state.tags;          return (             <div classname="feature">                 <div classname="icon">                     <i classname="glyphicons tags" />                 </div>                 <div classname="text">                     <h3>tag</h3>                     <small>                         {                             object.keys(tags).map(function(tag,i) {                                   return (                            <span id={"tag-"+tag} key={"tag-"+tag}><a href={"/books/list/tag/"+tags[i].tag}>{tags[i].tag}</a>&nbsp;&nbsp;</span>                                 );                             })                         }                      </small>&nbsp;&nbsp;                      <br />                 </div>             </div>         );     } } 

this tag component reused in 2 locations: bookdetail component , readinglist component.

in bookdetail component's render function, put:

<tags bookid={book.bookid} /> 

this works fine. console log shows output tags.componentdidupdate() function.

in readinglist component's render function, put:

object.keys(readings).map((reading, index) => {     let book=readings[index].book;     console.log("reading mapping:"+book.bookid);     return (         <table key={"review-" + index} classname="table">              <tbody>                   <tr>                       <td classname="col-sm-3">                            <img src="..."/>                       </td>                       <td classname="col-sm-3">                            <a href="...">{book.title}</a>                       </td>                       <td classname="col-sm-2">{book.author}</td>                       <td classname="col-sm-3">                             <tags key={book.bookid} bookid={book.bookid} />                       </td> 

...........

that is, tags component shall generated/rendered multiple times in map loop.

the problem is: while tags component working fine in bookdetail (when rendered once 1 particular book), tags component not working in readinglist. there no console log @ all, seems me tags.componentdidupdate called @ all.

the difference can figure out is: bookdetail have 1 tags in readinglist tags invoked map.

would appreciate valuable input.