How to pass variables from class to class

Question

Alright, so I'm trying to simplify a project I'm working on, but of all the information I've read on the internet, none of it has answered my question. My doubt is how can I pass variables (the name of the variable, and its value) from one class to another class? Should I use props? Should I just do something similar to this.state.variable? How can it be done? I'll write a sample code just to show what I'm trying to do more visually, however, this is not my actual code. Thanks for helping :)

class FishInSea{
    constructor(props){
        super(props);
        this.setState({fishInSea: 100});
    }
    render(){
        return(
            <div>Fish in the sea: {this.state.fishInSea}</div>
        );
    }
}

class FishInOcean{
    constructor(props){
        super(props);
        this.setState({fishInOcean: <FishInSea this.props.fishInSea/> * 1000});
    }
    render(){
        return(
            <div>Fish in the ocean: {this.state.fishInOcean}</div>
        );
    }
}

export default FishInOcean;

Hemadri Dasari · Accepted Answer · 2018-10-18 21:29:53Z

2

You need to first make both the classes in to React components. Since both the classes modify the state so they called as statefull components. The class has to extend the Base class of React i.e., Component.

in constructor we only do state initialisations but won’t modify the state there. But you are modifying the state which isn’t correct. Instead move setState to componentDidMount.

Say suppose in FishInSea class you have fishInSea and you want to pass it to FishInOcean component as props.

Check below two corrected components how they are passed from one component to the other

  import React, { Component } from “react”;
  class FishInSea extends Component{
       constructor(props){
            super(props);
            this.state = {
                 fishInSea: 100
            }
       }
       componentDidMount(){
             this.setState({fishInSea: 100});
       }
       render(){
           const { fishInSea } = this.state;
                return(
                   <div>Fish in the sea: 
                         <FishInOcean fishInSea={fishInSea} />
                   </div>
            );
        }
   }


    import React, { Component } from “react”;
    class FishInOcean extends Component{
         constructor(props){
             super(props);
             this.state = {fishInOcean: 1000}
         }
         componentDidMount(){
             this.setState({fishInOcean: 1000});
          }
        render(){
           const { fishInOcean} = this.state;
           const { fishInSea } = this.props;
           return(
               <div>Fish in the ocean: {fishInOcean}
                    {fishInSea}
               </div>
           );
       }
   }

  export default FishInOcean;
  /*There was a typo*/

edited Oct 18, 2018 at 21:29

answered Oct 18, 2018 at 4:20

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Estus Flask Over a year ago

Since fishInOcean initial state is constant, it likely should be initially set to 100 and 1000.

Dan Over a year ago

But what if we wanted to pass the value of fishInSea, and use it to manipulate the value of fishInOcean, and then render it? Would this work too?

Hemadri Dasari Over a year ago

@Dan sorry I am unable to understand your query

Dan Over a year ago

Maybe I didn't explain well enough? If you want, I could try to. But if not, thank you anyway for your effort and time bro :)

Hemadri Dasari Over a year ago

@Dan You are welcome. Please do upvote and accept the answer if it resolves you original issue

Collectives™ on Stack Overflow

How to pass variables from class to class

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related