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