CODEWITHSUNDEEP
javascriptreactjsinput
Undelivered
Undelivered

Reputation: 45

ReactJS passing input data to next screen/component

I've looked up whole google for my answer (haha). What I am trying to achieve:

My fist screen is a form with some input fields which store the input to state. By clicking "submit" the user comes to the next page/screen, where the previous input is supposed to show up. I want to show only the input data as a p-tag, not as an input tag anymore.

How do I achieve this? I am bloody new to reactjs.

I've thought about multiple solutions:

  1. store the input data to an external JSON (which seems pretty complicated)
  2. pass the data as props, but I am not aware of how I would do this

Thanks so far!

Upvotes: 0

Views: 237

Answers (1)

TKoL
TKoL

Reputation: 13902

I'm going to assume that your second screen has the same parent component as your first, something like this:

render() {
    return (
        <div>
            {this.state.showFirstScreen && <FirstScreen />}
            {this.state.showSecondcreen && <Secondcreen />}
        </div>
    )
}

If that's the case, your FirstScreen component can accept a prop called something like onSubmit -- you say that you already store the input values from FirstScreen in state, so when FirstScreen is finished, you can call this.props.onSubmit(this.state) and it will send up the state to your parent component, as long as you've defined a callback function in the parent component:

{this.state.showFirstScreen && <FirstScreen onSubmit={this.onFirstScreenSubmit} />}

Then, you can save the state of the first screen into the state of your Parent component, and pass that part of the state down to SecondScreen

[edit] here's a very crude example: https://jsfiddle.net/df4s9ey8/

Upvotes: 1

Related Questions