Pass data between different components in react

Question

Pass data between different components in react

Navigation

#1 by (0 votes)

0

My question is how can I pass data from a JSON rescued in the main component

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;

& pass example title to another different component

import React, {Component} from 'react';

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

export default Video;

I would really appreciate it.

json reactjs react

asked by Francisco Navarrete 19.08.2018 в 21:24

source

1 answer

Using apiDoc Problems with apidoc.json file Failure in context path - Netbeans -Tomcat

score 0 · Answer 1

The way I can think of without using redux, is to create a new state of title.
this.state = { dataSource: [], title : "", };
Each time the handleClick () function is executed, you enter the title that comes as a parameter to the new state.
handleClick(title){ this.setState({ title : title }); }
Now that you have the title stored in the state, you can send it as property in the Video component.
Your code in the Home component would be as follows:

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;

Now it is only to call the Video component where you need to renderize within the Home component in the following way <Video title={title} /> of this way you are sending the title that we have stored in the state title to the component Video

The code in the component Video would be like this, we receive the property title that are being sent to it from Home and we print it in the H1

import React, {Component} from 'react';

class Video extends Component{

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

export default Video;