CODEWITHSUNDEEP
reactjsreact-router
Anis Kaloun
Anis Kaloun

Reputation: 190

Sending form data with react Router from a Component to another

I have a simple form where the user inserts his info and I want to send his info to another Component that I navigate to with Router Link

FormulairePlayer.js

import React from 'react';
import { Button, Form, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';

export default class FormulairePlayer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            Age:'',
            Sexe:'Homme',
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({[event.target.name]: event.target.value});
      }

    handleSubmit(event) {
        alert("L'utilisateur a était soumis " + this.state.value);
        event.preventDefault();
      }

    render() {
        return (
            <div>  
                <Form>
                    <Form.Group as={Col} controlId="formAge">
                        <Form.Label>Age</Form.Label>
                        <Form.Control type="number" name="Age" value={this.state.Age} onChange={this.handleChange} placeholder="Age" required="true" />
                    </Form.Group>

                    <Form.Group as={Col} controlId="formSexe">
                        <Form.Label>Sexe</Form.Label>
                        <Form.Control name="Sexe" as="select" value={this.state.Sexe} onChange={this.handleChange} >
                            <option selected value="Homme">Homme</option>
                            <option value ="Femme">Femme</option>
                        </Form.Control>
                    </Form.Group>

                    <Link to="/StartGame">
                        <Button variant="primary" type="submit" onClick={this.handleSubmit}>
                            Suivant
                    </Button>
                    </Link>
                </Form>

            </div>

        );
    }
}

Is there any way to do it with Router Link or should I use another method?

Upvotes: 1

Views: 2488

Answers (1)

Ajin Kabeer
Ajin Kabeer

Reputation: 2186

You can use the <Link /> component to send data as props while you navigate between components.

Update:

handleSubmitEvent(event) {
  alert("L'utilisateur a était soumis " + this.state.value);
  event.preventDefault();
  return (
  <Redirect
    to={{
      pathname: `/StartGame`,
      state: { age: this.state.age, sex: this.state.sex },
    }}
  />)
}

<Button variant="primary" type="submit" onClick={this.handleSubmit}>
  Suivant
</Button>;

And you can access this props in your navigated component via this.props.location.state. Since you are using a class-based component, you can access it in a lifecycle method and set the state when the component is initially rendered like this for example:

componentDidMount(){
console.log(this.props.location.state)
}

Upvotes: 2

Related Questions