ReactJS passing state to another class

Question

i have problem in accesing the state on the other component. I am beginner in using the reactjs. I am still confuse on how to use the state and props. I am getting the input which will be set to the state as username then I will pass it to the formDetails component and use it when the handleSubmit triggers. can someone help me I would appreciate any comments, answers, suggestions.

//Components
 class DaysForm extends React.Component {
constructor() {
    super();
    this.state = {
        username: ""
    };
    this.updateInput = this.updateInput.bind(this);
}

onCalculate(e) {
    $("#myModal").modal();
}

updateInput(event) {
    this.setState({ username: event.target.value });
}

render() {
    return (
        <div>
            <p>How many days are in a full time working week?</p>
            <input
                type="text"
                className="form-control"
                onChange={this.updateInput}
            />
            <p>How many days a week will this employee work?</p>
            <input type="text" className="form-control" />
            <br />
            <center>
                <button
                    className="btn btn-default"
                    onClick={this.onCalculate.bind(this)}
                >
                    Calculate
                </button>
            </center>
        </div>
    );
}
}

class FormDetails extends React.Component {
constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
    //console.log here the state that is comming from the component
}

render() {
    return (
        <div>
            <p>Email Address:</p>
            <input type="text" className="form-control" />
            <p>Business Name:</p>
            <input type="text" className="form-control" />
            <p>Phone Number:</p>
            <input type="text" className="form-control" />
            <br />
            <center>
                <button
                    className="btn btn-default"
                    onClick={this.handleSubmit}
                >
                    Submit
                </button>
            </center>
        </div>
    );
}
}

Answer 1

From my understanding, you want to set the username in the DaysForm component, and then upon handleSubmit being clicked, it will show up in the FormDetails component. Is that correct?

Assuming so, there are a couple things missing.

First of all, you are not currently rendering FormDetails in the DaysForm. So right now, they have no relation to each other. Or at least not in the code you displayed. Are you using the username as a redux state perhaps which is share in the two components? Because this changes everything if that's the case.

The easier way to do this would be to have FormDetails be a child of DaysForm and then pass the username state as a prop in the FormDetails component. This will make it look something like this:

class DaysForm extends React.Component {
// your code

render(){
return(
      <div>
        <p>      
            How many days are in a full time working week?
        </p>
        <input type="text" className="form-control" onChange={this.updateInput}/>
        <p>      
            How many days a week will this employee work?
        </p>
        <input type="text" className="form-control"/>
        <br></br>
        <center>
            <button className="btn btn-default" onClick={this.onCalculate.bind(this)}>Calculate</button>
        </center>

        <FormDetails username={this.state.username}/>
      </div>

  )
 }
}

However, you mentioned that the components have no relation to each other, I am assuming that there are no other components that can connect the two, so this complicates a bit when you want to pass in a state from one component to another. Based on the post's tags, I am assuming you are using Redux. If not, for this case I would encourage you to do so, since it will handle your state in between components. Of course if you haven't touched any of that yet, I will admit it is a whole new can of worms to open.

As for the difference between state and props. State usually belong to a component, you change them causing the component to rerender and they may be later passed in as a props for a child component (as shown in the example code). Props on the other hand come from other components and are immutable. See more here. The way you are using the state in DaysForm seems to be just fine and is as expected, the main challenge here is figuring out how to pass that state to FormDetails when there are no obvious other components in between them.