title: How to open child component modal from parent by using its key in ReactJs
body: <p>I am creating my blog where I want to edit the each blog respectively on click of it edit button.
  Now modal is opening for respective id but value is not set with <code>state</code> value.
  That is <code>componentwillmount</code> is not properly working.</p>
  
  <p>Any suggestion what i made mistake here ? It will be helpful. 
  How can I make this possible witht he current set of code.</p>
  
  <p>//blog.js (Parent component)</p>
  
  <pre><code>import React, {Component} from 'react';
  import ReactGA from 'react-ga';
  import {Card, Grid, Cell, Dialog, CardMenu, Button, CardTitle, CardText, CardActions, FABButton, Icon} from'react-mdl';
  import { Container, Modal,  ModalHeader, ModalBody, Form, FormGroup, Label, Input,} from 'reactstrap';
  import { connect } from 'react-redux';
  import { getBlog, deleteBlog, updateBlog } from '../../actions/resumeActions';
  import PropTypes from 'prop-types';
  import Loading from './Loading';
  import Moment from 'moment';
  import BlogModal from "./BlogModal";
  import Pagination from "react-js-pagination";
  // import EditBlog from "./EditBlog";
  
  class Blogs extends Component{
      initializeReactGA() {
          ReactGA.initialize('UA-132348738-1');
          ReactGA.pageview('/contact');
      }
      constructor(props) {
          super(props);
              this.state = {
                  modal: false,
                  justClicked: null,
                  activePage: 1,
                  requiredItem : null,
                  _id: '',
                  blog_short_desc: '',
                  blog_name: '',
                  blog_desc: '',
                  blog_image_link: '',
                  blog_by: '',
                  blog_by_author: ''
              };
              this.handleOpenDialog = this.handleOpenDialog.bind(this);
                this.handleCloseDialog = this.handleCloseDialog.bind(this);
                this.replaceModalItem = this.replaceModalItem.bind(this);
              this.onTodoChange = this.onTodoChange.bind(this);
          }
  
      static propTypes = {
          getBlog: PropTypes.func.isRequired,
          deleteBlog: PropTypes.func.isRequired,
          updateBlog: PropTypes.func.isRequired,
          resume: PropTypes.object.isRequired,
          auth: PropTypes.object.isRequired,
          loading: PropTypes.object.isRequired
      }
  
      UNSAFE_componentWillReceiveProps(nextProps) {
          this.setState({
              value: nextProps.name
          })
      }
  
      toggle = (id) =&gt; {
          this.setState({
              modal: !this.state.modal
          });
      }
  
      componentWillMount() {
  debugger
          this.props.resume["blogs"].map((blog) =&gt; {
              this.setState({
                  updatable : false,
                  _id: blog._id,
                  blog_short_desc: blog.blog_short_desc,
                  blog_name: blog.blog_name,
                  blog_desc: blog.blog_desc,
                  blog_image_link: blog.blog_image_link,
                  blog_by: blog.blog_by,
                  blog_by_author: blog.blog_by_author
              });
          })
      }
  
      replaceModalItem(id) {
          debugger
          this.setState({
            modal: true,
            requiredItem: id
  
          });
          debugger
      }
  
      onTodoChange = (e) =&gt; {
          this.setState({ 
              [e.target.name] : e.target.value 
          });
      }
  
      onSubmit = (e, id) =&gt; {
          e.preventDefault();
          const updatedBlog = {
              blog_short_desc: this.state.blog_short_desc,
              blog_name: this.state.blog_name,
              blog_desc: this.state.blog_desc,
              blog_image_link: this.state.blog_image_link,
              blog_by:  this.props.auth["user"]._id,
              blog_by_author: this.props.auth["user"].name
          }
          //update blog via updateblog action
          this.props.updateBlog(id, updatedBlog, this.props.history);
          alert("Blog updated successfully!");
          //close modal
          e.target.reset();
          this.toggle();
      }
  
      handleOpenDialog(id) {
          this.setState({
            openDialog: true,
            OpenEditDialog: true,
            justClicked: id
  
          });
      }
  
      handleCloseDialog() {
      this.setState({
          openDialog: false
      });
      }
  
      componentDidMount() {
          this.props.getBlog();
      }
  
      onDeleteBlogClick = (id) =&gt; {
          this.props.deleteBlog(id);
      };
  
      handlePageChange(pageNumber) {
          this.setState({activePage: pageNumber});
      }
  
      cardDialog(blogs, user){
          const itemsPerPage = 6; 
          let activeBlogs = blogs.slice (itemsPerPage * this.state.activePage - itemsPerPage, itemsPerPage * this.state.activePage);
          return( 
              &lt;Grid style={{padding: 0, display: 'contents'}}&gt;
  
                  {activeBlogs.map(({ _id, blog_name, blog_desc, blog_image_link, blog_by_author }) =&gt; (
                  &lt;Cell col={12}&gt;
                      &lt;Dialog open={this.state.openDialog &amp;&amp; this.state.justClicked === _id} className="open-dialog"&gt;
  
                          {blog_image_link ?
                              (&lt;CardTitle style={{color: '#fff', height: '176px', backgroundImage: `url(${blog_image_link})`, backgroundPosition: 'center',
                              backgroundSize: 'cover',
                              backgroundRepeat: 'no-repeat'}}&gt;{blog_name}&lt;/CardTitle&gt;) :
  
                              (&lt;CardTitle className="card-blog-title-image"&gt;{blog_name}&lt;/CardTitle&gt;
                              )
                          }
                          &lt;CardText&gt;
                              {blog_desc}
                          &lt;/CardText&gt;
                          &lt;CardActions border&gt;
                          &lt;p style={{float:'right', fontWeight:'bold'}}&gt;Author: {blog_by_author}&lt;/p&gt;
                          &lt;/CardActions&gt;
                          &lt;CardMenu style={{color: '#fff'}}&gt;
                              &lt;FABButton onClick={this.handleCloseDialog} className="close-button" &gt;
                                  &lt;Icon name="close" /&gt;
                              &lt;/FABButton&gt;
                          &lt;/CardMenu&gt;
                      &lt;/Dialog&gt;
                  &lt;/Cell&gt;
                  ))}
              &lt;/Grid&gt;
          )
      }
  
      editcardDialog(blogs, user){
          const itemsPerPage = 6; 
          let activeBlogs = blogs.slice (itemsPerPage * this.state.activePage - itemsPerPage, itemsPerPage * this.state.activePage);
          return( 
              &lt;span&gt;
                  &lt;a className="btn edit-btn-blog-post" href="#" onClick={this.toggle}  title="Edit Blog"&gt;
                      &lt;i className="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;/a&gt;
                  {activeBlogs.map(({ _id, blog_short_desc, blog_name, blog_desc, blog_image_link, blog_by_author }) =&gt; (
                  &lt;Modal 
                      isOpen = {this.state.modal &amp;&amp; this.state.requiredItem === _id}
                      toggle = {()=&gt;this.toggle(_id)}    
                  &gt;
                      &lt;ModalHeader toggle={this.toggle}  style={{fontWeight: "bold"}}&gt;
                          Edit your blog {this.state.blog_name}
                      &lt;/ModalHeader&gt;
                      &lt;ModalBody&gt;
                          &lt;Form onSubmit={e =&gt; this.onSubmit(e, this.state._id )}&gt;
                              &lt;FormGroup&gt;
                                  &lt;Label for="blogHeading"&gt;Blog Heading&lt;/Label&gt;
                                  &lt;Input type="text" name="blog_short_desc" id="blogHeading" placeholder="Update one liner"
                                  onChange={this.onTodoChange} value={blog_short_desc}/&gt;
                                   &lt;Label for="blogName"&gt;Blog Name&lt;/Label&gt;
                                  &lt;Input type="text" name="blog_name" id="blogName" placeholder="Update blog name"
                                  onChange={this.onTodoChange} value={blog_name}/&gt;
                                  &lt;Label for="desc1"&gt;Description &lt;/Label&gt;
                                  &lt;Input type="textarea" name="blog_desc" id="desc1" placeholder="Update your blog"
                                  onChange={this.onTodoChange} value={blog_desc}/&gt;
                                   &lt;Label for="imageUrl"&gt;Image Url&lt;/Label&gt;
                                  &lt;Input type="text" name="blog_image_link" id="imageUrl" placeholder="Update image url (Optional)"
                                  onChange={this.onTodoChange} value={blog_image_link}/&gt;
                                  &lt;Button
                                      color="dark"
                                      style={{marginTop: '2rem'}}
                                      block
                                  &gt;Edit blog&lt;/Button&gt;
                              &lt;/FormGroup&gt;
                          &lt;/Form&gt;
                      &lt;/ModalBody&gt;
                  &lt;/Modal&gt;
                  ))}
              &lt;/span&gt;
          )
      }
  
      render(){
          const { blogs, loading} = this.props.resume;
          const {  user, isAuthenticated } = this.props.auth;
          const itemsPerPage = 6; 
          let activeBlogs = blogs.slice (itemsPerPage * this.state.activePage - itemsPerPage, itemsPerPage * this.state.activePage);
          return(
              &lt;Container&gt;
  
              {loading ? (
              &lt;div&gt;&lt;Loading/&gt;&lt;/div&gt;
              ) : (
                  &lt;div&gt;
                      {/* blog modal */}
                      &lt;BlogModal /&gt;
  
                      {/* card dialog */}
                      {this.cardDialog(blogs, user)}
  
                      {this.editcardDialog(blogs, user)}
  
                      &lt;Grid style={{padding: 0}} id="todo"&gt;
                          {activeBlogs.map((item, i) =&gt; (
                              &lt;Cell key={item._id} data-id={item._id}&gt;   
                                  &lt;Card shadow={5} className="cards-grid"&gt;
  
  
                                      {item.blog_image_link ?
                                          (&lt;CardTitle style={{color: '#fff', height: '200px',
                                          width: 'auto', backgroundImage: `url(${item.blog_image_link})`, backgroundPosition: 'center',
                                          backgroundSize: 'cover',
                                          backgroundRepeat: 'no-repeat'}}&gt;&lt;/CardTitle&gt;) :
  
                                          (&lt;CardTitle className="card-title-image"&gt;&lt;/CardTitle&gt;
                                          )
                                      }
  
                                      &lt;CardText&gt;
                                          &lt;b&gt;{item.blog_short_desc}&lt;/b&gt;
                                      &lt;/CardText&gt;
  
                                      &lt;CardActions border&gt;
                                          &lt;p&gt;
                                          &lt;Button className="blog-read-me-button col-4" onClick={this.handleOpenDialog.bind(this, item._id)}&gt;Read &lt;/Button&gt; 
  
                                          { isAuthenticated &amp;&amp; (item.blog_by === user._id) ? 
                                          &lt;span className="col=8"&gt;
  
                                          &lt;Button className="remove-btn-blog-post"
                                          color="danger"
                                          size="sm"
                                          onClick= {this.onDeleteBlogClick.bind(this, item._id)} title="Delete Blog"&gt;
                                              &amp;times;
                                          &lt;/Button&gt; 
                                          &lt;a className="btn edit-btn-blog-post" href="#" onClick={this.replaceModalItem.bind(this, item._id)}  title="Edit Blog"&gt;
                                              &lt;i className="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;/a&gt; 
  
                                          {/* &lt;a className="btn edit-btn-blog-post" href="#" onClick={this.handleEditOpenDialog.bind(this, item._id)}  title="Edit Blog"&gt;
                                              &lt;i className="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
                                          &lt;/a&gt; */}
  
                                          &lt;/span&gt; : null }
                                          &lt;/p&gt;
  
                                          &lt;p style={{ fontStyle:'italic', fontWeight:'bold'}}&gt;By-{item.blog_by_author} &lt;span style={{float:'right',}}&gt;{Moment(item.date).format('Do MMMM YYYY')}&lt;/span&gt;&lt;/p&gt; 
                                      &lt;/CardActions&gt;
                                  &lt;/Card&gt;  
                              &lt;/Cell&gt;  
                          ))} 
                      &lt;/Grid&gt;
                  &lt;/div&gt; 
                  )}
                  &lt;Pagination
                      activePage={this.state.activePage}
                      itemsCountPerPage={6}
                      totalItemsCount={blogs.length}
                      pageRangeDisplayed={5}
                      onChange={this.handlePageChange.bind(this)}
                      itemClass='page-item'
                      linkClass='page-link'
                  /&gt;
              &lt;/Container&gt;
          ) 
     }
  }
  
  const mapStateToProps = (state) =&gt; ({
      resume: state.resume,
      auth: state.auth,
      loading: state.apiCallsInProgress &gt; 0
  });
  
  export default connect(mapStateToProps, {getBlog, deleteBlog, updateBlog }) (Blogs);
  </code></pre>