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.
