PaginaPersonajes
import React, { Component } from 'react';
import * as ReactBootstrap from 'react-bootstrap';
import { PaginaPlataformas } from './PaginaPlataformas';
import { PaginaJuegos } from './PaginaJuegos';
import { DetallesPersonajes } from './DetallesPersonajes';
import data from "../JSON/Personajes.json";
import './Personajes.css';
import { CargarDatos } from './CargarDatos'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export class PaginaPersonajes extends Component {
click(e) {
//const mother = new Mother();
//mother.addMother(id);
console.log();
}
render() {
console.log('-> render')
return (
<div className="fondodepantalla">
<Router>
{data.map((perso, index) => {
return (
<div key={perso.Nombre} className="MoviesList-item">
<ReactBootstrap.Card onClick={this.click} href="http://escuela.it " style={{ width: '15rem' }}>
<ReactBootstrap.Nav.Link href="/DetallesPersonajes" >Personajes</ReactBootstrap.Nav.Link>
<Link to='/DetallesPersonajes2'>Tyler McGinnis</Link>
<Link
to={{ pathname: '/DetallesPersonajes2/'+perso.Nombre}}
className="list-group-item"
key={perso.Nombre}>
{perso.Nombre}
</Link>
<Link to={{ pathname: '/DetallesPersonajes', query: { the: perso.Nombre } }}>eeeee </Link>
{ /*<ReactBootstrap.Nav.Link to="/DetallesPersonajes" title="Index Page" >Personajes</ReactBootstrap.Nav.Link> */}
{/*Para coger la carpeta public */}
<ReactBootstrap.Card.Img variant="top" src={process.env.PUBLIC_URL + perso.Foto} alt="Error" />
<ReactBootstrap.Card.Body>
<ReactBootstrap.Card.Title>{perso.Nombre}</ReactBootstrap.Card.Title>
<ReactBootstrap.Card.Text> {perso.Descripcion} </ReactBootstrap.Card.Text>
</ReactBootstrap.Card.Body>
<Switch>
{/* Rutas de las paginas */}
<Route
path='/DetallesPersonajes2:id'
render={(props) => <DetallesPersonajes data={perso} {...props} />}
/>
</Switch>
</ReactBootstrap.Card>
</div>
);
})}
</Router>
</div>
)
}
}
DetallesPersonajes.js
import React, { Component } from 'react';
import * as ReactBootstrap from 'react-bootstrap';
import data from "../JSON/Personajes.json";
import { PaginaJuegos } from './PaginaJuegos';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export class DetallesPersonajes extends Component{
constructor(props){
super(props)
//PARA MODIFICAR ELEMENTOS DEL STATE HACE FALTA PONER EL .SETINTERVAL , cada segundo suma +1 al contador
debugger;
}
render(){
this.forceUpdate()
console.log(this.props.persona.Nombre)
return (
<div>
<p>{ this.props.persona.Nombre}</p>
</div>
)
}
}
Cómo pasar páginas de página JSON en DetailsPersons en detalles de componentes.
Estoy cargando pj en json y quiero pasar detalles json en los caracteres de detalles del componente cuando el usuario hace clic en la tarjeta.
¿Cómo puedo pasar el objeto?
Cómo puede usar Route para esto o cuál es la mejor manera de pasar objetos en componentes.