0

I am new in react, and I am working on a project. I have two pages/components. I take details of user on page and want to show data on another page. But I am not able to do it. Can somebody please help.

This is my first page Personal.js


import React from "react";
import { Form, Row, Col, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
// import bootstrap from "bootstrap";
import { Link } from "react-router-dom";


class Personal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
    };
  }

  render() {
    return (
      <>
        <h2 className="text-center my-4">Personal Information</h2>

        <div expand="md" className="container my-4 ">
          <Form >
            <Row className="my-4">
              <Col>
                <Form.Label>First Name</Form.Label>
                <Form.Control id="first_name" placeholder="First name" />
              </Col>
              
            </Row>

           
            <Link to="/Final">
              <Button
                onClick={() =>
                  this.setState({
                    name: document.getElementById("first_name").value,})}
                variant="outline-primary">{" "}Next</Button>{" "}
            </Link>
          </div>
        </div>
      </>
    );
  }
}

export default Personal;

And this is my Second Page Final.js

import React from "react";
import { Link } from "react-router-dom";

const Final = (props) => {
  return (
    <>
      <h2>Your Name{this.props.name}</h2>   
     
    </>
  );
};

export default Final;
Rahul
  • 13
  • 3
  • This is work for me : https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router – Jagruti Metaliya Jul 13 '21 at 11:22
  • you can use state in parent component where these two pages are called, may be `App.js`, or use some global state management, `Context API` is an easy solution with no extra dependencies for this task – Kritish Bhattarai Jul 13 '21 at 11:36

1 Answers1

0

this may not solve the problem, but your Final component is a functional component, which accepts props as an argument, so instead of this.props.name you would just access props.name. I also can't work out what's going on with the {" "} quotes where you're rendering your Button component?

In Personal you're setting the name value on that component's state, so you would either need to render Final within Personal so you could pass that value down, or give them a common source to read that data from, e.g. a Context or a common parent (like the <App> component).

stephenpalgeorge
  • 16