3

Mi pregunta es la siguiente: ¿cómo puedo pasar datos de una ventana a otra si traigo los datos por un JSON? El objetivo es que al hacer click me mande X dato a otra ventana por react.

Muestro el código:

import React, { Component } from 'react';
import Prueba from './Prueba';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state = {
    tarjetas: [
        {
          imagenUrl: "https://d2mn9dr0jv4622.cloudfront.net/wp-content/uploads/2017/12/11002955/continuous-integration-for-react-native.png",
          titulo: "Titulo",
          descripcion: "Descripción"
        },
        {
          imagenUrl: "https://d2mn9dr0jv4622.cloudfront.net/wp-content/uploads/2017/12/11002955/continuous-integration-for-react-native.png",
          titulo: "Titulo",
          descripcion: "Descripción"
        }
      ]
    }
    
  }
  MandarImagen(){
   console.log('AL HACER CLICK DEBE DE MANDAR LA MISMA IMAGEN A OTRA VENTANA');
  }

  render() {
    return (
      <div className="App">
        
        {this.state.tarjetas.map((dynamicData) => (
          <div>
            <img 
            onClick={this.MandarImagen}
            src={dynamicData.imagenUrl} />
            <p>{dynamicData.titulo}</p>
            <p>{dynamicData.descripcion}</p>
         </div>
        ))}
      
      
      </div>
    );
  }
}

export default App;

Esta parte Es la principial el componente App:

import React from 'react';

const Prueba = () => (

    <div className="App">
      <h1>AQUI DEBE DE APARECER LA IMAGEN DE APP</h1>
    </div>

);

export default Prueba;

Aqui debe recibir dicho elemento para mostrarlo.

2
  • 1
    ¿Cómo estás navegando a la otra ventana? Si quieres pasar los datos a un componente puedes hacerlo por medio de props
    – user22721
    Commented el 3 ago. 2018 a las 19:13
  • De hecho agregaría que navegar es una cosa, y pasar datos a otro componente y renderizarlo es otra distinta en React. Commented el 23 sept. 2019 a las 22:57

4 respuestas 4

1

React utiliza el state y los props para comunicar datos entre diferentes componentes, o si utlizas las ultimas versiones de la libreria, la Context API.

Para utilizar state y props tus componentes deben tener una relacion de padre-hijo o tener un pariente comun por encima (hermanos). El state son los datos que contiene el padre y los props los que se pasan a sus hijos. En el caso de la relacion de hermanos, deberias de mandar desde el componente que extrae el JSON estos datos a su padre, y el padre, a su vez, pasara estos datos como props a su otro hijo.

1

En React no hay "ventanas", sino componentes que renderizan en el browser algunos elementos. Te anexo mi solución a tu pregunta. Modifiqué para que el componente App renderize el Prueba, y la función que debe mostrarlo lo que hace es cambiar el estado para que React deba actualizar el render. La Url de la imagen la paso como parámetro en el click, esto lo cambié también, igual que la recepción del parámetro en la función MandarImagen. (Agrégale tus url de las imágenes a la data de prueba).

import React, { Component } from "react";
import Prueba from "./Prueba";

class App extends Component {
  constructor() {
    super();
    this.state = {
        tarjetas: [
        {
          imagenUrl:
          "https://homepages.cae.wisc.edu/~ece533/images/airplane.png",
          titulo: "Titulo1",
          descripcion: "Descripción1"
        },
        {
          imagenUrl:
            "https://homepages.cae.wisc.edu/~ece533/images/boat.png",
          titulo: "Titulo2",
          descripcion: "Descripción2"
        }
      ],
      ImagenUrl: ""
    };
  }
  MandarImagen(img) {
    this.setState({ ImagenUrl: img });
  }

  render() {
    return (
      <div className="App">
        {this.state.tarjetas.map(dynamicData => (
          <div>
             <img
              onClick={() => this.MandarImagen(dynamicData.imagenUrl)}
              src={dynamicData.imagenUrl}
              alt="texto img"
            />
            <p>{dynamicData.titulo}</p>
            <p>{dynamicData.descripcion}</p>
          </div>
        ))}
        <div>
        <Prueba ImageSource= {this.state.ImagenUrl}/>
        </div>
      </div>     
    );
  }
}
export default App;

Y para el Prueba, le cambié el renderizado para que no mande nada si no ha seleccionado el usuario alguna imagen (estado inicial) con una condicional

import React from "react";

const Prueba = props => {
  const imgSrc = props.ImageSource;
  if (imgSrc) {
    return (
      <div className="App">
        <h1>Imagen Seleccionada
          <img src={imgSrc} alt="prueba" />
        </h1>
      </div>
    );
  }
  return "";
};
export default Prueba;

Podríamos mejorarlo con object desctructure, pero de momento queda entendible así. El esquema queda como que App es un componente con estado y manipula al Prueba, que no tiene estado, esto para garantizar el "single source of truth", o una sola fuente de la verdad (información en realidad). Debo agregar que no debes llamar a tus servicios de datos en el constructor, sino en una función del componente (como render) que se llama componentDidMount() y desde aquí actualizar tus datos en el state, donde si deben estar inicializados a vacío [] para los arreglos, por ejemplo.

saludos!

0

Te puedo decir 3 alternativas que haría.
La primera.- Que el nuevo componente sea un child component, donde le mandarias esa imagen que dices como propiedad.
La segunda.- Utilizar redux, para manejar el store de la aplicación.
La tercera.- Utilizar ReactContextAPI.

Espero te de una pauta, para que busques mas a detalle.

0

Básicamente @Narshe te ha dado la respuesta. Intentaré explicar su respuesta brindándote un ejemplo para que lo puedas entender fácilmente. Observa el siguiente snippet y después lee la explicación:

const App = (props) => {

  const tarjetas = [
    {
      imagenUrl: "https://d2mn9dr0jv4622.cloudfront.net/wp-content/uploads/2017/12/11002955/continuous-integration-for-react-native.png",
      titulo: "Titulo 1",
      descripcion: "Descripción 1"
    },
    {
      imagenUrl: "https://d2mn9dr0jv4622.cloudfront.net/wp-content/uploads/2017/12/11002955/continuous-integration-for-react-native.png",
      titulo: "Titulo 2",
      descripcion: "Descripción 2"
    }
  ];
  
  return (
    <div className="App">
      {tarjetas.map((dynamicData, index) => (
        <div className="imageContainer" key={`image${index}`}>
          <img
          width="100"
          onClick={props.mandarImagen.bind(this, dynamicData.titulo)}
          src={dynamicData.imagenUrl} />
          <p>{dynamicData.titulo}</p>
          <p>{dynamicData.descripcion}</p>
       </div>
      ))}
    </div>
  );
};

const Prueba = (props) => (
    <div className="App">
      <h1>{ props.titulo }</h1>
    </div>
);

const Padre = (props) => {

  const [titulo, setTitulo] = React.useState("Haz click en cada imagen para cambiar el título");

  const mandarImagen = (tituloImagen) => {
    setTitulo(tituloImagen);
  };
  
  return(
    <React.Fragment>
      <Prueba titulo={titulo} />
      <App mandarImagen={mandarImagen} />
    </React.Fragment>
  );

};

ReactDOM.render(
  <Padre />,
  document.getElementById('app')
);
.App .imageContainer {
  display: inline-block;
  margin: 0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

<div id="app">
</div>

Como te explicó @Narshe, debes tener un elemento padre que contenga a tus dos componentes:

<!-- Este es el componente Padre -->
<!-- tiene que recibir el título de App y enviárselo como propiedad a Prueba -->
<Padre>
    <!-- Este es el componente que tiene el título que quieres variar -->
    <Prueba />
    <!-- Este componente debe enviar el título a Padre -->
    <App />
</Padre>

Como puedes ver dentro de App, al hacer click en cada imagen, se llama a un método que se debe haber enviado como propiedad enviándole como parámetro el título de la imagen clicada:

onClick={props.mandarImagen.bind(this, dynamicData.titulo)}

Y dentro de Padre, puedes notar como se le manda una función como parámetro mandarImagen al componente App.

<App mandarImagen={mandarImagen} />

Dicha función no hace más que cambiar el state del componente actualizando la variable titulo (he utilizado hooks para actualizar el estado, pero puedes usar setState si tus componentes son clases):

const mandarImagen = (tituloImagen) => {
    setTitulo(tituloImagen);
};

Y como titulo se le envía como propiedad a Prueba:

<Prueba titulo={titulo} />

Pues cada vez que este cambie, React actualizará el componente mostrando el nuevo título.

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.