-1

What this Question is trying to figure out is simple:

"Can I send props programatically from one scene to another, and if so, how?"

Below I have provided a sample set of code in the hope that someone will have the knowledge to clear this up once and for all.

App.js file:

const Main = () => (
    <main>
        <Switch>
            <Route exact path='/Job' component={Job}/>
            <Route path='/Preview' component={Preview}/>
        </Switch>
    </main>

Job.js:

Long story short, the file takes input and outputs once the user clicks submit, this function is called:

 handleClick(){
    //The state I wish to pass: this.state.propToPass
    //my current implementation for moving to the correct scene:
    this.props.history.push('/Preview')

}

Preview.js

constructor(props){
    super(props)
    //console.log(the prop that has been sent)
}

I will be eternally gratuful to anyone who understands the problem and can shed some light on my dilemma.

Thank you very much.

linasmnew
  • 3,907
  • 2
  • 20
  • 33
J Dorrian
  • 206
  • 3
  • 15

2 Answers2

3

Here's an example with withRouter. It's a higher order function that returns the child component with the router attached so you can switch routes programmatically.

Moving to the answer, by sending an object instead of just a string. You can specify data to send across as state by attaching a property within the object called state which will consist of data that you want to send across.

import React from 'react';
import {withRouter} from 'react-router-dom';

class Test extends React.Component {
  _handleClick = () => {
    this.props.history.push({
      pathname: '/roster',
      state: {
        'hello': 'world',
      }
    });
  }
  render() {
    return (
      <button onClick={this._handleClick}>Go To Roster Programmatically</button>
    )
  }
}

export default withRouter(Test);
Win
  • 5,498
  • 2
  • 15
  • 20
  • Not sure how this applies to the question at hand, would this go into my Jobs.js file? How would I access the prop from the preview.js file? – J Dorrian Nov 19 '17 at 13:27
  • 1
    @JDorrian Ah, my code sandbox didn't save and it pasted the wrong version. See the above example. In roaster you will be able to access `props.location.state` and you will find `{ hello: 'world' }`. – Win Nov 19 '17 at 13:35
  • thank you so much, I've been trying to implement this for hours, you just made my day! – J Dorrian Nov 19 '17 at 13:37
  • 1
    @JDorrian no problem! Sorry about the confusion :) – Win Nov 19 '17 at 13:38
0

I highly recommend using redux-form as it uses a reducer to save the state of the form. Then, after routing to the desired component, you can connect that component to the form state as well to get the info you need. It is a powerful tool that helps you manage the state of forms, and it sounds like what you need.

Gilad Bar
  • 1,302
  • 8
  • 17
  • 1
    Sorry @gilad I did some editing when I was posting this to try make it clearer, I have updated the code to make it more reflective of the actual problem. – J Dorrian Nov 19 '17 at 13:23
  • The issue here is that I cannot send props along with the history when I change scenes, I thought this would have been an easy thing to do but can't seem to find a way to do it properly anywhere – J Dorrian Nov 19 '17 at 13:24
  • I edited the answer, hope it helps. – Gilad Bar Nov 19 '17 at 13:30
  • 1
    I'm unfamiliar with Redux and so I am trying to avoid using it for this project. I'm beginning to think that this can't be done without using redux :'( Thanks anyway Gilad – J Dorrian Nov 19 '17 at 13:34