title: Passing props to modal in ReactJs
body: <p>I work actually on my first react app. It's a collection app. On this app, there is an admin dashbord, with all items of the app, and admin user can delete or modify item (like a traditional e-commerce back office). For modify item, admin user click on button "Modify Item", and a modal open for modify item information. </p>
  
  <p>My problem is when user open modal, the modal work fine, but i can't passing in props the information of the selected item (like brandname, reference, price ...). I'm very sorry to ask again a question in the same day, but i try many thing and no result. A little help is very welcome. </p>
  
  <p>Thank you in advance,</p>
  
  <p>This is my code: </p>
  
  <pre><code>import React, { Component } from 'react';
  import { database } from '../firebase/firebase';
  import * as firebase from 'firebase';
  import withAuthorization from './withAuthorization';
  import _ from 'lodash';
  import AuthUserContext from './AuthUserContext';
  import FileUploader from "react-firebase-file-uploader";
  import Image from 'react-image-resizer';
  import{InstantSearch, SearchBox, Hits, Highlight, RefinementList} from "react-instantsearch/dom";
  import Modal from 'react-responsive-modal';
  
  
  
  function removeToCatalogue(hit) { 
    const item = hit.objectID;
      firebase.database().ref(`catalogue/${item}`).remove();
      console.log("Capsule correctement supprimée du catalogue")
  }
  
  
  
  
  const Hit = ({hit, onEdit}) =&gt;
      &lt;div className="item"&gt;
         &lt;img src={hit.avatarURL} width={150} height={150}&gt;&lt;/img&gt;
          &lt;h1 className="marque"&gt;{hit.marque}&lt;/h1&gt;
          &lt;h3 className="numero"&gt;{hit.numero}&lt;/h3&gt;
          &lt;h4 className="reference"&gt;{hit.reference}&lt;/h4&gt;
          &lt;h4 className="marquesuite"&gt;{hit.marquesuite}&lt;/h4&gt;
          &lt;p className="cote"&gt;{hit.cote}&lt;/p&gt;
          &lt;button className="btn btn-warning" onClick={onEdit}&gt;Modify Item&lt;/button&gt;
          &lt;button className="btn btn-danger" onClick={() =&gt; removeToCatalogue(hit)}&gt;Supprimer&lt;/button&gt; 
      &lt;/div&gt;
  
    const Content = ({ onEdit }) =&gt; {
  
      const EnhancedHit = props =&gt;
         &lt;Hit onEdit={ onEdit } { ...props } /&gt;
  
      return (
        &lt;div className="text-center"&gt;  
          &lt;Hits hitComponent={ EnhancedHit } /&gt;
        &lt;/div&gt;
      )
    }
  
  
  
  
  class Admin extends React.Component {
    constructor (props) {
      super (props);
  
      this.state = {
        marque: '',
        marquesuite: '',
        numero: '',
        reference: '',
        cote: '',
        avatar: "",
        isUploading: false,
        progress: 0,
        avatarURL: "",
        catalogue: {},
        showModal: false,
  
      };
      this.onInputChange = this.onInputChange.bind(this);
      this.onHandleSubmit = this.onHandleSubmit.bind(this);
  
    }
  
  
    onOpenModal = () =&gt; {
      this.setState({ open: true });
    };
  
    onCloseModal = () =&gt; {
      this.setState({ open: false });
    };
  
  
    onInputChange(e) {
      this.setState({
        [e.target.name]: e.target.value
      });
    }
  
    onHandleSubmit(e){
      e.preventDefault();
      const catalogue = {
        marque: this.state.marque,
        marquesuite: this.state.marquesuite,
        numero: this.state.numero,
        reference: this.state.reference,
        cote: this.state.cote,
        avatar: this.state.avatar,
        avatarURL: this.state.avatarURL,
  
      };
      database.push(catalogue);
      this.setState({
        marque: '',
        marquesuite: '',
        numero: '',
        reference: '',
        cote: '',
        avatar: "",
        isUploading: false,
        progress: 0,
        avatarURL: "",
      });
    }
  
    handleUploadStart = () =&gt; this.setState({ isUploading: true, progress: 0 });
    handleProgress = progress =&gt; this.setState({ progress });
    handleUploadError = error =&gt; {
      this.setState({ isUploading: false });
      console.error(error);
    };
  
    handleUploadSuccess = filename =&gt; {
      this.setState({ avatar: filename, progress: 100, isUploading: false });
      firebase
        .storage()
        .ref("images")
        .child(filename)
        .getDownloadURL()
        .then(url =&gt; this.setState({ avatarURL: url }));
    };
  
  
    render (){
      const { open } = this.state;
      return (
        &lt;div className="container-fluid"&gt;
          &lt;div className="container"&gt;
          &lt;h1 class="text-center"&gt;Espace d'Administration&lt;/h1&gt;
          &lt;a href="https://super-capsule.000webhostapp.com/signaler-modification" class="btn btn-primary btn-lg active" role="button" aria-disabled="true"&gt;Signaler une modification&lt;/a&gt;
          &lt;form onSubmit={this.onHandleSubmit}&gt;
            &lt;div className="form-group"&gt;
            &lt;label&gt;Marque de la capsule:&lt;/label&gt;
            &lt;input
              value={this.state.marque}
              type="text"
              name='marque'
              placeholder="Marque"
              onChange={this.onInputChange}
              ref="marque"
              className="form-control" /&gt;
            &lt;/div&gt;
            &lt;div&gt;
            &lt;label&gt;Numéro de la capsule:&lt;/label&gt;
            &lt;input
              value={this.state.numero}
              type="text"
              name='numero'
              placeholder="Numéro de la capsule"
              onChange={this.onInputChange}
              ref="numero"
              className="form-control"/&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
            &lt;label&gt;Référence de la capsule:&lt;/label&gt;
            &lt;input
              value={this.state.marquesuite}
              type="text"
              name='marquesuite'
              placeholder="Référence de la capsule"
              onChange={this.onInputChange}
              ref="marquesuite"
              className="form-control"/&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
            &lt;label&gt;Référence de la capsule (suite):&lt;/label&gt;
            &lt;input
              value={this.state.reference}
              type="text"
              name='reference'
              placeholder="Référence de la capsule (suite)"
              onChange={this.onInputChange}
              ref="reference"
              className="form-control"/&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
            &lt;label&gt;Cote de la capsule:&lt;/label&gt;
            &lt;input
              value={this.state.cote}
              type="text"
              name='cote'
              placeholder="Cote de la capsule"
              onChange={this.onInputChange}
              ref="cote"
              className="form-control"/&gt;
            &lt;/div&gt;
  
            &lt;label&gt;Visuel de la capsule:&lt;/label&gt;
            {this.state.isUploading &amp;&amp; &lt;p&gt;Progress: {this.state.progress}&lt;/p&gt;}
            {this.state.avatarURL &amp;&amp; &lt;img src={this.state.avatarURL} /&gt;}
            &lt;FileUploader
              accept="image/*"
              name="avatar"
              randomizeFilename
              storageRef={firebase.storage().ref("images")}
              onUploadStart={this.handleUploadStart}
              onUploadError={this.handleUploadError}
              onUploadSuccess={this.handleUploadSuccess}
              onProgress={this.handleProgress}
            /&gt;
            &lt;button className="btn btn-info"&gt;Ajouter une capsule&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
          &lt;h1 className="text-center"&gt;Catalogue de capsule&lt;/h1&gt;
  
  
  
          &lt;InstantSearch
              apiKey="xxx"
              appId="xxx"
              indexName="xxx"&gt;
  
  
              &lt;SearchBox translations={{placeholder:'Rechercher une capsule'}} width="500 px"/&gt;
  
  
              &lt;Content onEdit={this.onOpenModal}/&gt;  
  
                &lt;div&gt;
                  &lt;Modal open={open} onClose={this.onCloseModal} center&gt;
                    &lt;h2&gt;Modification de la capsule&lt;/h2&gt;
                    &lt;p&gt;Marque de la capsule:&lt;input type="text" class="form-control" id="maj-marque" value=""&gt;&lt;/input&gt;&lt;/p&gt;
                    &lt;p&gt;Numéro de la capsule:&lt;input type="text" class="form-control" id="maj-num" value=""&gt;&lt;/input&gt;&lt;/p&gt;
                    &lt;p&gt;Référence de la capsule:&lt;input type="text" class="form-control" id="maj-ref" value=""&gt;&lt;/input&gt;&lt;/p&gt;
                    &lt;p&gt;Référence de la capsule (suite):&lt;input type="text" class="form-control" id="maj-refsuite" value=""&gt;&lt;/input&gt;&lt;/p&gt;
                    &lt;p&gt;Cote de la capsule:&lt;input type="text" class="form-control" id="maj-cote" value=""&gt;&lt;/input&gt;&lt;/p&gt;
                    &lt;button className="btn btn-success"&gt;Update&lt;/button&gt;
  
                  &lt;/Modal&gt;
              &lt;/div&gt;  
  
  
            &lt;/InstantSearch&gt;
  
  
  
        &lt;/div&gt;
      )
    }
  }
  
  
  
  const authCondition = (authUser) =&gt; !!authUser;
  
  export default withAuthorization(authCondition)(Admin);
  </code></pre>