0

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.

1
  • Título en español por favor. Gracias :D
    – fredyfx
    Commented el 29 abr. 2020 a las 17:22

1 respuesta 1

0

Puedes pasarle parametros por props

import MyComponent from './myComponent';
import React, { Component } from 'react';

export default class principal extends Component {
  constructor() {
     this.state = {
        persona: { Nombre:"Jose",id: 1},
     };
  }

  render() {
    return {
      <div>
        <MyComponent datosPersona={this.state.persona} />
      </div>
    }
  }

}

Component a pasar datos por props

import React, { Component } from 'react';

export default MyComponent extends Component {
   constructor(props) {
     super(props);
   }

   componentDidMount() {
     console.log(this.props.datosPersona.Nombre);
   }

}

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.