PASS DATA FROM ONE WINDOW TO ANOTHER IN REACT

1

My question is how can I pass data from one window to another if I bring the data through a JSON? The goal is that when I click on it send me X data to another window per response

I show the code

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;

this part is the main component App

import React from 'react';

const Prueba = () => (

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

);

export default Prueba;

Here you should receive this element to show it

    
asked by Francisco Navarrete 03.08.2018 в 19:58
source

1 answer

0

I can tell you 3 alternatives that I would do.
The first one .- That the new component is a child component, where you would send that image that you say as property.
The second .- Use redux, to manage the store of the application.
The third .- Use ReactContextAPI.

I hope you have a guide, so you can look more closely.

    
answered by 26.10.2018 в 21:37