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)

if you pass a value prop to an input you need to provide an onChange handler. If you don't wish to handle change yourself, pass value using defaultValue prop, not value. The error message is quite self-explanatory, does it even requires any explanation. — Vaibhav Vishal
– Vaibhav Vishal, Commented Aug 27, 2019 at 13:49
this doesn't work , please see here . It still gives me nothing. — Maifee Ul Asad
– Maifee Ul Asad, Commented Aug 27, 2019 at 14:01
there are a million errors, set up a demo on codesandbox or something — Vaibhav Vishal
– Vaibhav Vishal, Commented Aug 27, 2019 at 14:02

Bourbia Brahim · Accepted Answer · 2019-08-27 14:07:04Z

1

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 )

answered Aug 27, 2019 at 14:07

Bourbia Brahim

14.7k4 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maifee Ul Asad Over a year ago

When I use facebook I goto facebook.com or facebook.com/notifications not facebook.com**userName** That's why I'm demotivated in this strategy.

Maifee Ul Asad Over a year ago

Here is my code. It's not rendering as it meant to be. Here is what it is rendering.

Bourbia Brahim Over a year ago

{this.state.errorName} instead of {this.props.errorName}

Maifee Ul Asad Over a year ago

I'm asking for one more favor. Can you see this and give me some sort of solution or suggestion regarding this problem ?

Vinit Bhavsar · Accepted Answer · 2019-08-27 13:55:41Z

1

I'm assuming that your route is like this:

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

Try this :

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

answered Aug 27, 2019 at 13:55

Vinit Bhavsar

2523 silver badges13 bronze badges

7 Comments

Maifee Ul Asad Over a year ago

My Route looks like this : <Route path="/edit" component={ProfileEdit} />

Vinit Bhavsar Over a year ago

Your route must be like "/edit/:id" then you pass state value to link and access that state value in ProfileEdit component by : this.props.params.match.id

Maifee Ul Asad Over a year ago

When I use facebook I goto https://www.facebook.com/ or https://www.facebook.com/notifications not https://www.facebook.com/**userName**

Vinit Bhavsar Over a year ago

that's facebook and facebook is not fully developed in react. if you want to pass state value in profileEdit component then you have to pass it as props like <ProfileEdit state={this.state.value} />

Vinit Bhavsar Over a year ago

Talking about facebook.com/username then route is defined as <Route path="/:profileId" component /> and Link is like <Link to={${this.state.profileId}} /> and that profileId is stored in sessionStorage while user logged in, so that can be used until user logged out or widow closed. You can not set session time in react,it can be set by backend programming.

|

Collectives™ on Stack Overflow

react.js pass value using link

2 Answers 2

4 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related