Good evening I want to add a modal window on my screen and it turns out that when you add it as a component, hide the html table, Greetings !!
render() {
debugger;
return ( //<div className="deifnirAreaProyectos"></div>
<TablaHtml rows = {this.PonerDatosFilasTabla()} />
,<ModalBasic/> // buttonLabel = "Nuevo" classNameBtn = "btnNuevo"
//<button className = "btnNuevo" color = "success" >Nuevo</button> //estaba en menu, pasar el estilo
)
}
This is the modal on the screen
This is the table that is hidden, when I use the modal and it works when I remove
the <ModalBasic/> component of the render
Inside the component, I simply have the modal of the page of reacstrap: link
import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
class ModalBasic extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: true
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<div>
<Button color="danger" onClick={this.toggle} className ={"des"}>
Nuevo
</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle} >
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalBasic;
Within the <TablaHtml rows = {this.PonerDatosFilasTabla()} /> component, there is only this code:
import React,{ Component } from 'react'
export default class tabla extends Component{
render() {
return (
<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Clave</th>
<th>Descripción</th>
<th colspan ="3">Opciones</th>
</tr>
</thead>
<tbody>
{this.props.rows}
</tbody>
</table>
)
}
}
This would be the code, of my screen where I call the components of table and modal, here I use grid css to position the elements of the table, here I position the table, based on the grid I already made in the component MenuIndex. .
import estilo from './../../Estilo/Proyecto/index.css' (import)
estilo de la tabla
.deifnirAreaProyectos{
border:1px solid #808080;
grid-column: 2/19;
grid-row: 3/19;
}
table{
grid-column: 3/18;
grid-row: 5/17;
}
td {
padding: 2px 5px;
}
.jsonOdd {
background: #eee;
}
codigo
import React,{ Component } from 'react'
import estilo from './../../Estilo/Proyecto/index.css'
import TablaHtml from '../TablaHtml/'
import ModalBasic from '../Modals/'
import {fnConsultarProyectosIdNombre} from './../../../Services/usuarios.service.js'
import { Button} from 'reactstrap';
export default class Proyectos extends Component
{
constructor(props){
//debugger;
super(props);
this.state = { resultJSONObject : {} }
const {token} = props;
this.ObtenerProyectosIdNombre(token); //Inicio
}
ObtenerProyectosIdNombre = (token) => {
fnConsultarProyectosIdNombre(token)
.then( data => {
this.setState({ resultJSONObject : data }); //actualiza state, va al render
}).catch(error => this.setState({ error, isLoading: false }));
}
//*destructurizacion de objeto en parametro
//De un objeto, sacar el json array y retornarlo
ObtenerDatosJSONObject = ({ JSONOArrayProyectos }) => {
debugger;
if( JSONOArrayProyectos === undefined){
return { idProyecto : 0, nombreProyecto : "Sin resultados",
claveProyecto : "Sin resultados", descProyecto : "Sin resultados"};
}else
{
return JSONOArrayProyectos;
}
}
//recibe array de objetos y ponerlo en tabla
PonerDatosFilasTabla = () =>{
debugger;
var arrayObject = this.ObtenerDatosJSONObject(this.state.resultJSONObject);
let rows = [];
for(var i = 0; i < arrayObject.length; i++){
let cell = []
cell.push(<td>{arrayObject[i].nombreProyecto}</td>)
cell.push(<td>{arrayObject[i].claveProyecto}</td>)
cell.push(<td>{arrayObject[i].descProyecto}</td>)
cell.push(<td><input type = "button" value = "Editar"/></td>)
cell.push(<td><input type = "button" value = "Eliminar"/></td>)
cell.push(<td><input type = "button" value = "Detalles"/></td>)
rows.push(<tr >{cell}</tr>)
}
return rows;
}
render() {
debugger;
return ( //<div className="deifnirAreaProyectos"></div>
<TablaHtml rows = {this.PonerDatosFilasTabla()} />
,<ModalBasic/> // buttonLabel = "Nuevo" classNameBtn = "btnNuevo"
//<button className = "btnNuevo" color = "success" >Nuevo</button> //estaba en menu, pasar el estilo
)
}
}
This is the style of my menu, here I start the css grid and from here I call the code where the components that give me problems are
import menu from "../ Style / Menu / index.css";
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.containerMenu{
display: grid;
grid-template-columns: repeat(20,1fr);
grid-template-rows: repeat(20,35px);
}
.Menu{
grid-column: 2/19;
grid-row: 2/4;
}
.btnNuevo{
grid-column: 15/18;
grid-row: 4/4;
margin-top: 5px;
margin-bottom: 5px;
}
This is code, which has the style that I put before and that calls the component projects.
import React,{ Component } from 'react'
import { BrowserRouter as Router, Link, Route} from "react-router-dom";
import Proyectos from "./Proyectos";
import Bitacora from "./Bitacora";
import menu from "../Estilo/Menu/index.css";
//import { Button} from 'reactstrap';
//<Route exact path="/" component={Proyectos} token = {this.props.token} />
export default class MenuIndex extends Component {
render() {
return (
<Router>
<div className = "containerMenu">
<ul className = "Menu">
<li>
<Link to="/" className = "Link">Proyectos</Link>
</li>
<li>
<Link to="/bitacora" className = "Link">Bitacora</Link>
</li>
<li>
<Link to="/grafica" className = "Link active">Grafica</Link>
</li>
</ul>
<Route exact path="/" render={ (props) => <Proyectos {...props} token={this.props.token} /> }/>
<Route exact path="/bitacora" component={Bitacora} />
<Route exact path="/topics"/>
</div>
</Router>
)
}
}
// Any guide that you can give me, welcome greeting, if you have any doubt with my problem I'm aware of it