0

Mi pregunta es la siguiente como puedo pasar datos de un JSON rescatado en el componente principal

import React, {Component} from 'react';
import { NavLink } from 'react-router-dom';
import Video from './Video';

class Home extends Component{
   
    constructor(props){
        super(props);
    
        this.state = {
          dataSource: []
        };
        
      }
    
      componentDidMount() {
        const url = 'http://localhost:4000/data'
        fetch(url).then((response) => response.json()).then((responseJson) => {
            let dataSource = [];
            Object.values(responseJson).forEach(item => {
                dataSource = dataSource.concat(item);
            });
            this.setState({dataSource: dataSource})
        });
    }
    handleClick(title){
        console.log(title)
    }
    
    render(){
        return(
          <div>
            <h1>Home</h1>
              { this.state.dataSource.map((dynamicData, i) =>
               
               <div key={ i } className="slide">
                <NavLink to="/Video">
                
                <img width="600px" height="300px"
                onClick={this.handleClick.bind(this,dynamicData.title)}
                src={dynamicData.image}
                />
                   
                </NavLink>
                   
                      
                </div>
              )
              *   
          </div>  
        );
    }
    
}

export default Home;

& pasar ejemplo title a otro componente diferente

import React, {Component} from 'react';

class Video extends Component{
    
    render(){
        return(
          <div>
              <h1>TITULO RESCATADO DEL JSON</h1>
          </div>  
        );
    }
}

export default Video;

Se los agradeceria mucho.

1

1 respuesta 1

1

La manera que se me ocurre sin utilizar redux, es crear un estado nuevo de title.

this.state = {
  dataSource: [],
  title : "",
};

Cada vez que se ejecute la función handleClick() seteas el title que llega como parámetro a el nuevo estado.

handleClick(title){
    this.setState({
        title : title
    });
}

Ahora que ya tienes el title almacenado en el estado, lo puedes enviar como propiedad en el componente Video.

Tu código en el componente Home quedaría de la siguiente manera:

import React, {Component} from 'react';
import { NavLink } from 'react-router-dom';
import Video from './Video';

class Home extends Component{
   
    constructor(props){
        super(props);
        
        this.state = {
          dataSource: [],
          title : "",
        };
        
      }
    
      componentDidMount() {
        const url = 'http://localhost:4000/data'
        fetch(url).then((response) => response.json()).then((responseJson) => {
            let dataSource = [];
            Object.values(responseJson).forEach(item => {
                dataSource = dataSource.concat(item);
            });
            this.setState({dataSource: dataSource})
        });
    }
    handleClick(title){
        this.setState({
          title : title
        });
    }
    
    render(){
        const {title} = this.state;
        return(
          <div>
            <h1>Home</h1>
              { this.state.dataSource.map((dynamicData, i) =>
               
               <div key={ i } className="slide">
                <NavLink to="/Video">
                
                <img width="600px" height="300px"
                onClick={this.handleClick.bind(this,dynamicData.title)}
                src={dynamicData.image}
                />
                   
                </NavLink>
                   
                      
                </div>
              )
              *
   
          </div>  
        );
    }
    
}

export default Home;

Ahora solo es llamar el componente Video dónde necesites que se renderice dentro del componente Home de la siguiente manera <Video title={title} /> de esta forma se le esta enviando el título que tenemos almacenado en el estado title a el componente Video.

El código en el componente Video quedaría así, recibimos la propiedad title que se le están enviando desde Home y la imprimimos en el H1.

import React, {Component} from 'react';

class Video extends Component{

render(){
    const {title} = this.props;
    return(
      <div>
          <h1>{title}</h1>
      </div>  
    );
}
}

export default Video;

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.