2

tengo dos componentes el principal que se llama primero y el otro que es el contenido del modal que se llama segundo, en el primer componente tengo un input con un boton de "+" que al darle clic me esta cargando un modal y dentro del modal me esta cargando el segundo componente donde carga una paginación con sus respetivos registros y cada registro aparece con el "+" hasta ahi bien, lo que necesito es que al darle a cualquier registro que me aparece con el signo "+" me copie el contenido del campo "nombre" al input del primer componente y me cierre el modal

https://codesandbox.io/s/nice-thunder-zqqlx?file=/src/App.js

Primero

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=>{
    const {name, value}=e.target;
    setFrameworkSeleccionado((prevState)=>({
      ...prevState,
      [name]: value
    }))
   console.log(frameworkSeleccionado);
  }
 
  const abrirCerrarModalCategoria=()=>{
    setModalCategoria(!modalCategoria);
  }
 
    return (
   <div className="content-wrapper">   
    <section className="content">
      <div className="container-fluid">
        
     <label>Categoría:</label>
     <div class="input-group">
     <br/>
     <button className='btn btn-info'  onClick={()=>abrirCerrarModalCategoria()}><i class="fas fa-plus"></i></button>
     <input type="text" className="form-control" name="categoria" onChange={handleChange} readOnly/>
     <br/>
     </div>
            <div>

<Modal isOpen={modalCategoria}>
<ModalBody>
   <Segundo /> 
 </ModalBody>
 <ModalFooter>
   <button className="btn btn-danger" onClick={()=>abrirCerrarModalCategoria()}>Cancelar</button>
 </ModalFooter>
</Modal>
            </div>
      </div>
    </section>
   
  </div>
     )
    }
  
export default Primero

Segundo

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() =>{
    await axios.get(baseUrlAd)
    .then(response=>{
     setData(response.data);
    }).catch(error=>{
      console.log(error);
    })

  }

  const seleccionarFramework=(framework, caso)=>{
    setFrameworkSeleccionado(framework);
  } 

  useEffect(()=>{
   
       peticionGet();  
   
   },[])

  

  
  const columnas =[
    {
      title:'NOMBRE',
      field:'nombre'
    },
    {
      title:"ID",
      field: "id_categoria",
      
    }

  ];

  

    return (
  <div>
    <section className="content">
      <div className="container-fluid">
        
        <div className="row">
        
          <div className="col-md-12">

         
            <div>
              
            <MaterialTable   
     
columns={columnas}
data={data}
title=""
backIconButtonText='Página anterior'
pagination
fixedHeader

actions={[
     {
       icon : 'add',
       tooltip: 'Agregar',
       onClick: (event, framework)=>seleccionarFramework(framework, "Agregar")
    }
]}
options={{
  actionsColumnIndex: -1
}}
options={{
 actionsCellStyle: {
 },

}}
localization={{
    header:{
    actions: 'ACCIONES'
    
  },
  body:{ 
    emptyDataSourceMessage:'No hay registros que mostrar',
    
   },
   
}}

/>
           </div>
       
          </div>

         
        </div>   

      </div>
    </section>
   
  </div>
     )
    }

export default Segundo

2
  • Podrias compartir el código en Codesnadbox para visualizar su ejecución.
    – Michael
    Commented el 3 feb. 2022 a las 1:42
  • listo ya lo agregue..
    – Giovanny
    Commented el 3 feb. 2022 a las 3:14

1 respuesta 1

0

Primero, para pasar los datos del modal al componente principal, debe usar alguna comunicación entre los componentes. Debería usar una devolución de llamada que he llamadoonSelect

El componente principal debe manejar ese evento:

const handleSelected = (selectedFramework) => {
    setFrameworkSeleccionado((prevState) => ({
      ...prevState,
      nombre: selectedFramework.nombre
    }));
    setModalCategoria(false);
};

y luego deberías pasarlo al componente hijo:

<Segundo onSelect={handleSelected} />

El componente modal (segundo) debería recibir esa devolución de llamada:

const seleccionarFramework = (framework, caso) => {
    onSelect(framework);
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.