How to pass data between functional components with props?

Question

I want to pass data {name} from Contact.js to Profile.js. I tried to use props to pass the {name} data but I couldn't. I am doing something wrong but I can not figure it out. .. I can write the name when user input on the same (Contact.js) page, but not in the Profile.js

Contact.js

import React, { useState } from "react";
import Form from 'react-bootstrap/Form';
import Accordion from 'react-bootstrap/Accordion';
import { FormControl, FormGroup, FormLabel } from 'react-bootstrap';

const Contact = () => {

    const [name, setName] = useState('');
    //const [lastName, setLastName] = useState('');
    //const [email, setEmail] = useState();


    const HandleName = (e) => {
        setName(e.target.value);
    }


    return (
        <>
        {name}
        {/*Contact Information*/}
        <Accordion>
        <Accordion.Item eventKey="0">
        <Accordion.Header>Contact Information</Accordion.Header>
        <Accordion.Body>
        <Form>
            <FormGroup className='mb-3' controlId='name'>
            <FormLabel>Name</FormLabel>
            <FormControl type='text' value={name} onChange={HandleName} placeholder='Your Name'></FormControl>
            </FormGroup>
        </Form>
        <Form>
            <FormGroup className='mb-3' controlId='lastname'>
            <FormLabel>Last Name</FormLabel>
            <FormControl type='text' placeholder='Your Last Name'></FormControl>
            </FormGroup>
        </Form>
        <Form>
            <FormGroup className='mb-3' controlId='email'>
            <FormLabel>Email Address</FormLabel>
            <FormControl type='email' placeholder='[email protected]'></FormControl>
            </FormGroup>
        </Form>
        </Accordion.Body>
        </Accordion.Item>
        </Accordion>
        </>
    )
}


export default Contact;

Profile.js

import React from 'react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';

function Profile() {
    

  return (
    <>
    <Card className="text-center">
        <Card.Header>
           
        </Card.Header>
      <Card.Body>
        <Card.Title>Special title treatment</Card.Title>
        <Card.Text>
          With supporting text below as a natural lead-in to additional content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
      <Card.Footer className="text-muted">2 days ago</Card.Footer>
    </Card>
    </>
  );
}

export default Profile;

Also I tried to pass {props} to Contact function and was thinking to use {props.name} in Contact.js but didn't work. I know that I am missing sth but it's been 2 days and can't solve it...

Answer 1

if u want to nivagate between 2 pages u need to import Link as this

import { Link } from "react-router-dom"; is an element that lets the user navigate to another page by clicking or tapping on it and then use Link components

but if u need to be the same info in 2 different pages u can use (frontend scenarios as: localStorage or sessionStorage Both are part of the Web Storage API and provide a way to store data in the browser across sessions without backend knoweladge )or work with backend so u need to made an APIs to fetch the data. Context API or Global State Management ,Server-side Handling (APIs).