0

I'm trying to pass the datas from json-server to another components using Link react-router-dom

import React from 'react';
import {Link} from 'react-router-dom';
const Calendar = (props) => {
   
    return (
        <>
            <Link to={{
                pathname: '/update',
                state:{
                    values: props
                }
            }} >
            <div className="calendar-list m-3 rounded-sm shadow-lg h-24 cursor-pointer relative ">
               
                    <h2 className="h-10 pl-1 pt-2">{props.title}</h2>
                    <span className="font-bold absolute bottom-2 right-100 pl-2">{props.status}</span>
                    <span className="absolute bottom-2 right-2">{props.date}</span>
            </div>
            </Link>
        </>
    );
}

export default Calendar;

this is my UpdateForm where the props is headed

import React from 'react';

import {Link,useNavigate,useLocation } from 'react-router-dom';

const UpdateForm = () => {
    const location = useLocation();
    const values = location.state.values
    console.log(location)
    let navigate = useNavigate();

    const handleChange = (e)=>{
        console.log(e)
    }
    const handleSubmit = (e)=>{
       
     navigate('/')
            
           

    }

    return (
        <div className=" relative pt-6 max-w-sm mx-auto min-h-screen overflow-hidden inline-block  w-10/12 bg-white rounded-xl shadow-lg">
        <div className="header flex justify-center ">
            <div className='absolute top-7 left-3 cursor-pointer'>
                <Link to="/">Back</Link>
                </div>
            <div className="text-xl text-center font-medium text-black">Update</div>
        </div>

        <form className=" rounded px-8 pt-10 pb-8 mb-4" onSubmit={handleSubmit}>
            <div className="mb-4">
                <input name="title" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"   type="text" placeholder="Title"  onChange={handleChange}/>
            </div>   
                <input name="date" className="shadow appearance-none border  rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"   type="date" 
                 onChange={handleChange}/>

                <select className="shadow border  rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" name="status" 
                onChange={handleChange}>
                    <option value="Pending">Pending</option>
                    <option value="On-going">On-going</option>
                    <option value="Done">Done</option>
                </select>
                <div className="float-right m-6">
            <button type="submit">
                Update
            </button>
        </div>
        </form>
       
    </div>

    );
}

export default UpdateForm;

already tried using the useLocation but it gives me state is null and says cannot read properties of null. I saw some answers here but they are all using class component and not hooks.

Rey
  • 120
  • 4
  • Please give us more detail on how you implemented the routes. I tried out `useLocation` in this [CodeSandbox](https://codesandbox.io/s/react-router-basic-forked-x46j8?file=/example.js) and everything seems to work just fine. – kunquan Feb 04 '22 at 04:46
  • I used Routes instead of Switch since it was replace in v6 and on the route I code it like this } – Rey Feb 04 '22 at 04:52
  • I don't think `Route` has the `element` property. Try changing it to `component`. Also, it would be more helpful if you can create a sandbox that can demonstrate the problem. – kunquan Feb 04 '22 at 04:55
  • @kunquan OP is using `react-router-dom` v6. in RRDv6 the `Switch` component was replaced by a required `Routes` component, and the `Route`s now have ***only*** an `element` prop for rendering routed components as JSX. – Drew Reese Feb 04 '22 at 17:13

0 Answers0