react.js pass value using link

Question

Here is my Profile class :

class Profile extends React.Component {
     state={email:'',userName:'',userID:''};
     render() {
              return(
     <div>
     ...
            <Link to={{pathname:"/edit",state:this.props.state}}>
     ...
     </div>

    );
}
}
export default Profile;

And here is my ProfileEdit class :

class ProfileEdit extends React.Component {
state={email:'',userName:'',userID:''};
render() {
    return(
        <div>
        ...
                        <TextField valueOfEmail={this.state.userID}/>
        ...
        </div>
    );
}
}
export default ProfileEdit;

And here is my TextField class :

class TextField extends React.Component {
render() {
    const {valueOfEmail}=this.props;
    return (
        <div>
            <div className="form-label-group">
                <input type="text" id="inputEmail" value={valueOfEmail} className="form-control" placeholder="Name" required autoFocus/>
                <label htmlFor="inputEmail">Enter Name</label>
            </div>
        </div>
    );
}
}
export default TextField;

It gives me error sometimes and sometime it doesn't, but it renders nothing.

Here is the error I have got :

I have used "react-router-dom": "^5.0.1"

How to resolve this and pass value correctly using <Link/> or something better.(Except redux - still learning)

Answer 1

I'm assuming that your route is like this:

<Route path="/edit/:id" component=componentName />

Try this :

<Link to={`/edit/${this.state.value}`} />

Answer 2

try to pass your params as path url params inside your router , So change your router component to

<Route path="/edit/:id/:email/:name" component={ProfileEdit} /> 

or if you want to make them not required just set your router to

<Route path="/edit/:id?/:email?/:name?" component={ProfileEdit} /> 

the link would be somthing like :

<Link to={{pathname:`/edit/${this.state.userID}/${this.state.email}/${this.state.userName}`}}>

then in the ProfileEdit component access those info by using the match props

so the values get accessed like :

this.state.email = this.props.match.params.email;
this.state.userName = this.props.match.params.name;
this.state.userID = this.props.match.params.id;

also the to remove error thrown : add onChange (controlled) to your input or replace value with defaultValue attr (uncontrolled ) see this for more info .

the new input of TextField Component should look like

<div className="form-label-group">
       <input type="text" id="inputEmail" defaultValue={valueOfEmail} className="form-control" placeholder="Name" required autoFocus/>
       <label htmlFor="inputEmail">Enter Name</label>
</div>

if there are too mush params then you have to use a store manager , (too mush param in url , ugly and could lead to errors )