Lifting state up and update it - reactjs

Question

I have a question regarding lifting state up, I am aware that his is a frequently asked question on here but I hope someone will try to help me understand.
Problem: I have a login component consisting of a form component in which I do my fetch call to execute the login. I want to keep the token I get from my fetch call and save it in the App component so I can use this token and pass it down other pages/components.
So to begin with, I start with my code in my App.js / the parent component?
In here i manage my Routes, and this is also her that I want to store my state.
I pass down the token from this state to the Login component as seen on the Route that renders the Login component.
From what I read, props are not mutable so this actually doesn't work the way I thought out? I made the handleToken function but I will return to that.
export default class App extends Component {
state = {
token: "",
regNo: "",
};
handleToken = (token) => {
this.setState({ token: token})
}
render() {
console.log(this.state.token);
return (
<Router >
<div>
<Header />
<Navbar isLoggedIn={this.state.token} />
<Switch>
<Route exact path="/" render={() => <Home />} />
<Route path="/profile" render={() => <Profile userToken={this.state.token} />} />
<Route path="/login" render={() => <Login userToken={this.state.token} />} />
<Route path="/register" render={() => <Register />} />
<Route path="/carpage" render={() => <CarPage regNo={this.state.regNo} />} />
<Route path="/find-rental" render={() => <FindRental regNo={this.state.regNo} setRegno={this.setRegno}/>} />
<Route path="/rent-out-car" render={() => <RentOutCar />} />
<Route component={NoMatch} />
</Switch>
</div>
</Router >
);
};
Now we move down to the Login component. This component consist of multiple other components that makes up the login page. One of which is the FormContainer where the fetch call for the Login happens.
const Login = (props) => (
<Container fluid={true}>
<BrandRow>
</BrandRow>
<FormRow>
<FormContainer /* userToken={this.props.userToken} */ />
</FormRow>
</Container>
);
export default Login;
(Not sure why it wouldn't render it properly as a code sample, so it went into code snippet)
So as you can see in this Login component, I have the FormContainer which it were all the action happens.
Let me show you:
class FormContainer extends Component {
state = {
userName: '',
password: '',
};
handleChange = event => {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({ [name]: value });
}
handleSubmit = event => {
event.preventDefault();
const credentials = { username: this.state.userName, password: this.state.password };
this.login(credentials);
}
login = credentials => {
const url = "https://fenonline.dk/SYS_Backend/api/login";
const postHeader = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(credentials)
};
fetch(url, postHeader).then(res => {
if (!res.ok) { throw Error(res.status + ": " + res.statusText + " | Wrong username or password!"); }
return res.json();
}).then(data => {
this.props.userToken = data.token;
alert("You have succesfully logged in!" + data.token);
this.props.history.push('/profile')
}).catch(error => alert(error));
}
render() {
const { userName, password } = this.state;
return (
<Container>
<Form onSubmit={this.handleSubmit}>
<Title>Sign In</Title>
<Input
type="text"
name="userName"
value={userName}
onChange={this.handleChange}
placeholder="Username.."
/>
<Input
type="password"
name="password"
value={password}
onChange={this.handleChange}
placeholder="Password.."
/>
<Button type="submit">Sign In</Button>
<Button onClick={() => this.props.history.push('/register')}>Register</Button>
</Form>
<Text>Rental service created by users for users.</Text>
</Container>
);
}
}
export default withRouter(FormContainer);
What you want to look at here is the login function, where I created the fetch call and this is where i get the token that i want to my lifted up state to store. Now i try and set it by saying this.props.userToken = data.token; but if props are immuteable how do I do this?

Answer 1

In order to lift state to your top level component, you need to pass your handleToken function into your login component as a prop.
<Route path="/login" render={() => <Login userToken={this.state.token} handleToken={this.handleToken} />} />
Then you will need to pass that into your FormContainer component as a prop as well.
<FormContainer handleToken={this.props.handleToken} />
Lastly, in your fetch, you'll need to call this method in the second .then() instead of trying to assign the token to a prop.
this.props.handleToken(data.token)
This will allow the state to be lifted up to the parent and then allow the token to be passed as a prop to your other components.