Passing Parameters to react-router-dom Link Dynamically

Question

I am working on a React project where in one of the components I am passing properties to another component through react-router-dom Link like so:

let updateEmpInfo;

...

<Button component={Link}
        halfWidth
        variant="contained"
        color="primary"
        preventDefault
        onClick={getEmpInfo}
        to={{pathname: "/update",
        state:
           {id: updateEmpInfo.id,
            name: updateEmpInfo.name,
            department: updateEmpInfo.department,
            gender: updateEmpInfo.gender}
            }}>Update information
</Button>

My questin is specifically about the "state" property. As you can see, I am passing several state parameters (id, name, department and gender). Since Link component is inside the render method, it requires the updateEmpInfo variable to be defined somewhere in the render method. I am trying to take input from user and based on their input set the value of all updateEmpInfo properties, after the component has rendered. All of them will be passed to the state property of Link. I am trying to do so in the getEmpInfo function. However, regardless of the input, the state property preserves all initial values that were set during the render. Is there a way to change updateEmpInfo properties based on the user input once the Link is clicked? I my question is clear enough. I will be happy to provide any additional info. Thank you in advance!

Answer 1

If I understood you correctly, the values passed are not how the user adjusted them. I'd suppose it's an onChange-Listener missing to the InputFields or an onSubmit to the whole form respectively.

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

class MyEmployeeForm extends Component {

constructor(props) {
    super(props);
    this.state = {
     id: "",
     name: "",
     department: "",
     gender: ""
    };
  }

  onChange = (event) => {
    this.setState({[event.target.name]: event.target.value});
  }

onUpdate = (event) => {
    event.preventDefault();
    this.props.history.push({
    pathname: '/update', 
    state: this.state});
  }



render() {
    <form>
        <input type="text" name="id" placeholder="id" value={this.state.id} onChange={this.onChange} />
        <input type="text" name="name" placeholder="name" value={this.state.name} onChange={this.onChange}/>
        <input type="text" name="department" placeholder="department" value={this.state.department} onChange={this.onChange}/>
        <input type="text" name="gender" placeholder="gender" value={this.state.gender} onChange={this.onChange}/>
     </form>);

    <Button component={Link}
            halfWidth
            variant="contained"
            color="primary"
            onClick={this.onUpdate}>
            Update information
    </Button>
}

}

export default withRouter(MyEmployeeForm);

see here Get form data in ReactJS , How to pass params with history.push/Link/Redirect in react-router v4?