Pass Data between classes components (React) - html

Question

I'm new to react and web dev in general. I need to pass a few values from a class to another when switching pages. My routes and links are working just fine.
I've tried a lot of stuff but I can't manage to pass the data to the class that is going to render the next page on the website. I need your help please ! (feel free to give me advice about the code, it's probably pretty shitty lol)
App.jsx
import React, { Component } from 'react'
import { BrowserRouter, Route, Routes} from 'react-router-dom';
import './App.css'
import SignIn from './SignIn/SignIn';
import Register from './Register/Register';
import Informations from './Register/Informations/Informations';
import PageNotFound from './PageNotFound/error';
import Photos from './Register/Informations/Photos/Photos'
class App extends Component {
render() {
return <BrowserRouter>
<Routes>
<Route path='/' element={<Register/>} exact/>
<Route path='/register' element={<Register/>}/>
<Route path='/sign-in' element={<SignIn/>}/>
<Route path='/infos' element={<Informations/>}/>
<Route path='/photos' element={<Photos/>}/>
<Route path='*' element={<PageNotFound/>}/>
</Routes>
</BrowserRouter>
}
}
export default App
Register.jsx (starting point of the site, I want the data to go from this class to the next one)
import React, { Component } from 'react';
import { Link } from "react-router-dom";
import './Register.scss'
import axios from 'axios'
import test_img from '../blink_logo.svg';
class Register extends Component
{
constructor (props) {
super(props);
this.state =
{
email: '',
firstname: '',
lastname: '',
telephone: '',
password: ''
}
this.handleLogin = this.handleLogin.bind(this);
}
handleLogin () {
axios.post('http://localhost:3000/api/user/', {email: this.state.email,
firstname: this.state.firstname,
lastname: this.state.lastname,
telephone: this.state.telephone,
password: this.state.password})
.then((response) =>
{
console.log(response);
this.setState({username: response.data.username})
}).catch(error =>
{
console.log(error);
})
console.log("Email: " + this.state.email);
console.log("Firstname: " + this.state.firstname);
console.log("Lastname: " + this.state.lastname);
console.log("Telephone: " + this.state.telephone);
console.log("Password: " + this.state.password);
}
handleEmailChange = (e) =>{
this.setState({email: e.target.value});
}
handleFirstnameChange = (e) =>{
this.setState({firstname: e.target.value});
}
handleLastnameChange = (e) =>{
this.setState({lastname: e.target.value});
}
handleTelephoneChange = (e) => {
this.setState({telephone: e.target.value});
}
handlePasswordChange = (e) => {
this.setState({password: e.target.value});
}
render () {
return (
<div>
<div className='image'>
< img src={test_img} alt="Blink Logo"/>
</div>
<div className='base-container-register'>
<div className='header'>Rejoindre l'aventure !</div>
<div className='content'>
<div className='form'>
<div className='label'>Email</div>
<div className='form-group'>
<input type="text" name="email" placeholder="email" value={this.state.email} onChange={this.handleEmailChange} />
</div>
<div className='label'>Prénom</div>
<div className='form-group'>
<input type="text" name="firstname" placeholder="prénom" value={this.state.firstname} onChange={this.handleFirstnameChange} />
</div>
<div className='label'>Nom</div>
<div className='form-group'>
<input type="text" name="lastname" placeholder="nom" value={this.state.lastname} onChange={this.handleLastnameChange} />
</div>
<div className='label'>Mot de passe</div>
<div className='form-group'>
<input type="password" name="password" placeholder="mot de passe" value={this.state.password} onChange={this.handlePasswordChange}/>
</div>
<div className='label'>Numéro de téléphone</div>
<div className='form-group'>
<input type="telephone" name="telephone" placeholder="numéro de téléphone" value={this.state.telephone} onChange={this.handleTelephoneChange}/>
</div>
</div>
<div className='footer' >
<Link to='/infos' state={{email: this.state.email}}>
<button onClick={this.handleLogin} className='footer'>Se lancer</button>
</Link>
{/* <Link to='/infos' params={email: this.state.email}>
<button onClick={this.handleLogin} className='footer'>Se lancer</button>
</Link> */}
</div>
</div>
</div>
<div className='redirect-to-signin'> Vous avez déjà un compte ? <Link to='/sign-in'>Sign in</Link> </div>
</div>
);
}
}
export default Register
Informations.jsx (where I want to grab the data from Register)
class Informations extends Component
{
constructor (props) {
super(props);
this.state =
{
username: '',
workInfo: '',
webSite: '',
socialId: '',
file: null,
file_name: '...'
}
this.handleLogin = this.handleLogin.bind(this);
this.handlePhotoChange = this.handlePhotoChange.bind(this)
}
I'm using react-router-dom v6.
Thank you in advance for your help.

Answer 1

When calling your Informations class just pass the values you want to send, as parameters.
<Informations value1={4} value2={8} />
To get the data you are sending from inside the Informations class:
this.props.value1

Answer 2

With v6 of react-router-dom, we can pass props to our components using the following method:
<Route path='/infos' element={<Informations value1={4} value2={8} />}/>
However, you are suggesting that values from the Register component need to make their way over to the Informations component. The better method for passing those values around would be to take advantage of React Context.
Using Context, you could have some state defined in a custom context that you can set in Register, and read in Informations.