title: copy field from one component to another via modal - reactjs
body: <p>I have two components, the main one that is called first and the other that is the content of the modal that is called second, in the first component I have an input with a &quot;+&quot; button that when I click it is loading a modal and inside the modal I am loading the second component where it loads a pagination with its respective records and each record appears with the &quot;+&quot; until there, well, <strong>what I need is that when I give any record that appears with the &quot;+&quot; sign, I copy the content from the field &quot;name&quot; to the input of the first component and I close the modal</strong></p>
  <p><a href="https://codesandbox.io/s/nice-thunder-zqqlx?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/nice-thunder-zqqlx?file=/src/App.js</a></p>
  <p>First</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React,{useState} from 'react';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import {Modal, ModalBody, ModalFooter} from 'reactstrap';
  import Segundo from "./Segundo";
  
  function Primero() {
    const [modalCategoria, setModalCategoria]=useState(false);
    const [frameworkSeleccionado, setFrameworkSeleccionado]=useState({
      id_articulo:'',
      nombre:''
    });
     
    const handleChange=e=&gt;{
      const {name, value}=e.target;
      setFrameworkSeleccionado((prevState)=&gt;({
        ...prevState,
        [name]: value
      }))
     console.log(frameworkSeleccionado);
    }
   
    const abrirCerrarModalCategoria=()=&gt;{
      setModalCategoria(!modalCategoria);
    }
   
      return (
     &lt;div className="content-wrapper"&gt;   
      &lt;section className="content"&gt;
        &lt;div className="container-fluid"&gt;
          
       &lt;label&gt;Categoría:&lt;/label&gt;
       &lt;div class="input-group"&gt;
       &lt;br/&gt;
       &lt;button className='btn btn-info'  onClick={()=&gt;abrirCerrarModalCategoria()}&gt;&lt;i class="fas fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;
       &lt;input type="text" className="form-control" name="categoria" onChange={handleChange} readOnly/&gt;
       &lt;br/&gt;
       &lt;/div&gt;
              &lt;div&gt;
  
  &lt;Modal isOpen={modalCategoria}&gt;
  &lt;ModalBody&gt;
     &lt;Segundo /&gt; 
   &lt;/ModalBody&gt;
   &lt;ModalFooter&gt;
     &lt;button className="btn btn-danger" onClick={()=&gt;abrirCerrarModalCategoria()}&gt;Cancelar&lt;/button&gt;
   &lt;/ModalFooter&gt;
  &lt;/Modal&gt;
              &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;
     
    &lt;/div&gt;
       )
      }
    
  export default Primero</code></pre>
  </div>
  </div>
  </p>
  <p>Second</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React,{useEffect, useState} from 'react';
  
  import MaterialTable from 'material-table';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import axios from 'axios';
  
  
  function Segundo() {
    
    const baseUrlAd = "https://www.inventarios.gemcont.com/apiGemcont/inventarios/categorias/"; 
    const [data, setData]=useState([]);
    const [setFrameworkSeleccionado]=useState({
      id_categoria:'',
      nombre:''
    });
  
     
    const peticionGet =async() =&gt;{
      await axios.get(baseUrlAd)
      .then(response=&gt;{
       setData(response.data);
      }).catch(error=&gt;{
        console.log(error);
      })
  
    }
  
    const seleccionarFramework=(framework, caso)=&gt;{
      setFrameworkSeleccionado(framework);
    } 
  
    useEffect(()=&gt;{
     
         peticionGet();  
     
     },[])
  
    
  
    
    const columnas =[
      {
        title:'NOMBRE',
        field:'nombre'
      },
      {
        title:"ID",
        field: "id_categoria",
        
      }
  
    ];
  
    
  
      return (
    &lt;div&gt;
      &lt;section className="content"&gt;
        &lt;div className="container-fluid"&gt;
          
          &lt;div className="row"&gt;
          
            &lt;div className="col-md-12"&gt;
  
           
              &lt;div&gt;
                
              &lt;MaterialTable   
       
  columns={columnas}
  data={data}
  title=""
  backIconButtonText='Página anterior'
  pagination
  fixedHeader
  
  actions={[
       {
         icon : 'add',
         tooltip: 'Agregar',
         onClick: (event, framework)=&gt;seleccionarFramework(framework, "Agregar")
      }
  ]}
  options={{
    actionsColumnIndex: -1
  }}
  options={{
   actionsCellStyle: {
   },
  
  }}
  localization={{
      header:{
      actions: 'ACCIONES'
      
    },
    body:{ 
      emptyDataSourceMessage:'No hay registros que mostrar',
      
     },
     
  }}
  
  /&gt;
             &lt;/div&gt;
         
            &lt;/div&gt;
  
           
          &lt;/div&gt;   
  
        &lt;/div&gt;
      &lt;/section&gt;
     
    &lt;/div&gt;
       )
      }
  
  export default Segundo</code></pre>
  </div>
  </div>
  </p>