Using variable from one component to another component without using props

Question

I have a component YourInformation:

class YourInformation extends React.Component{
constructor(props) {
    super(props);
    this.state = {
        errors: {},
        username:"",
        alterEGO:"",
        aboutYou:"",
        stage:1,
        blocking: false,
        canSubmit: false
    };

    /**** binding to make context of this to class ***/
    this.formValueChange = this.formValueChange.bind(this);
    this.disableButton = this.disableButton.bind(this);
    this.enableButton = this.enableButton.bind(this);
    this.submitInformation = this.submitInformation.bind(this);
}

/**** function to handle change in form inputs ****/
formValueChange(event) {
    event.preventDefault();
    if (event.target.id == 'username') {
      this.state.username = event.target.value;
    } else if (event.target.id == 'alterEGO') {
      this.state.alterEGO = event.target.value;
    } else if (event.target.id == 'aboutYou') {
      this.state.aboutYou = event.target.value;
    }

    return true;
}

/**** function to handle submit event ****/

submitInformation() {

    let _that = this;
    _that.setState({ blocking: true});

    /***** fetch API for your information starts **********/

    fetch(Constants.SERVER_URL + '/api/', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            username: this.state.username,
            alterEGO: this.state.alterEGO,
            aboutYou: this.state.aboutYou,
            stage: this.state.stage,
        }),
}).then(function (response) {

And one more component i.e.,

class ProfileInformation extends React.Component{
constructor(props) {
    super(props);
    this.state = {
          errors: {},
          customUrl:"",
          facebookLink:"",
          youtubeLink:"",
          instagramLink:"",
          twitterLInk:"",
          coverPic:"",
          profilePic:"",
          stage:3,
          categories:[],
          blocking: false,
          canSubmit: false
    };

    /**** binding to make context of this to class ***/
    this.formValueChange = this.formValueChange.bind(this);
    this.disableButton = this.disableButton.bind(this);
    this.enableButton = this.enableButton.bind(this);
    this.submitProfile = this.submitProfile.bind(this);
    this.getCategories = this.getCategories.bind(this);

}

I would like to access "username, alterEGO, aboutYOU" from yourInformation to ProfileInformation as I need these values prefilled in the profileInformation component form.

How can I fix this issue without using props, as I can not call ProfileInformation component into YourInformation component's render method?

It's unclear that you're approaching the problem the right way (the requirement not to use props) ... the data sharing architecture in React can be confusing, but you probably want a parent component that manages the data to both yourInformation and ProfileInformation and sends it to them as props. — user
– user, Commented May 3, 2018 at 14:45
But I am having these two separate components there is no parent component for them. And as per my requirement I need to use values from one to another component. Is there a possible way to do this ? — TechValens
– TechValens, Commented May 3, 2018 at 14:52
What keeps you from just writing a parent component? Note that components do not need to have a visual representation in the DOM. They can also just be data containers that provide data as props to its children. — trixn
– trixn, Commented May 3, 2018 at 14:54
If that is your hard requirement, then there is no way I know of in React to pass data from one component to another ... React does this via parent components passing props down to the children... — user
– user, Commented May 3, 2018 at 14:54

Bertran Guasch Parera · Accepted Answer · 2018-05-03 14:53:34Z

1

React doesn't really work this way. In react you want to have the data in the lowest parent possible that will use the information. So basically if you have 2 components working on the same data, this data should be managed by the parent component of these 2, and sent via props to both the components. I recommend you read the react documentation for further understanding.

If you want to access the data globally, I would complement your project with redux. Redux allows you to have a general store on the application that stores all the data, and you can access it from many components since it's stored on the whole application not just in a single component.

answered May 3, 2018 at 14:53

Bertran Guasch Parera

552 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Using variable from one component to another component without using props

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related