How to pass data between pages in react when using useparams()?

Question

App.jsx

import './App.css'
import React, {useState} from 'react';
import { Link, Routes, Route } from 'react-router-dom';
import Calendar from "./components/calendar/calendar.jsx";
import ToDo from "./components/todolist/todolist.jsx";
import { useParams } from 'react-router-dom';

const App = () => {

    return (
        <div>
            <Routes>
                <Route path='/' element={<Calendar  />} />
                <Route path='/todo/:id' element={<ToDo />} />
            </Routes>
        </div>
    )
}

export default App;

calendar.jsx

import './calendar.css'
import {Link} from 'react-router-dom'
import React from "react";

const Calendar = () => {

    return (
        <div className="month">
            <h1> February 2023 </h1>
            <div className="names">
                <div className="weekNames">Monday</div>
                <div className="weekNames">Tuesday</div>
                <div className="weekNames">Wednesday</div>
                <div className="weekNames">Thursday</div>
                <div className="weekNames">Friday</div>
                <div className="weekNames">Saturday</div>
                <div className="weekNames">Sunday</div>
            </div>
            <div className="week">
                <div className="day">1 <Link to='/todo/1'> To-Do:  </Link> </div>
                <div className="day">2 <Link to='/todo/2'> To-Do:  </Link> </div>
                <div className="day">3 <Link to='/todo/3'> To-Do: </Link> </div>
                <div className="day">4 <Link to='/todo/4'> To-Do: </Link> </div>
                <div className="day">5 <Link to='/todo/5'> To-Do: </Link> </div>
                <div className="day">6 <Link to='/todo/6'> To-Do: </Link> </div>
                <div className="day">7 <Link to='/todo/7'> To-Do: </Link> </div>
                <div className="day">8 <Link to='/todo/8'> To-Do: </Link></div>
                <div className="day">9 <Link to='/todo/9'> To-Do: </Link> </div>
                <div className="day">10 <Link to='/todo/10'> To-Do: </Link> </div>
                <div className="day">11 <Link to='/todo/11'> To-Do: </Link> </div>
                <div className="day">12 <Link to='/todo/12'> To-Do: </Link> </div>
                <div className="day">13 <Link to='/todo/13'> To-Do: </Link> </div>
                <div className="day">14 <Link to='/todo/14'> To-Do: </Link> </div>
                <div className="day">15 <Link to='/todo/15'> To-Do: </Link> </div>
                <div className="day">16 <Link to='/todo/16'> To-Do: </Link> </div>
                <div className="day">17 <Link to='/todo/17'> To-Do: </Link> </div>
                <div className="day">18 <Link to='/todo/18'> To-Do: </Link> </div>
                <div className="day">19 <Link to='/todo/19'> To-Do: </Link> </div>
                <div className="day">20 <Link to='/todo/20'> To-Do: </Link> </div>
                <div className="day">21 <Link to='/todo/21'> To-Do: </Link> </div>
                <div className="day">22 <Link to='/todo/22'> To-Do: </Link> </div>
                <div className="day">23 <Link to='/todo/23'> To-Do: </Link> </div>
                <div className="day">24 <Link to='/todo/24'> To-Do: </Link> </div>
                <div className="day">25 <Link to='/todo/25'> To-Do: </Link> </div>
                <div className="day">26 <Link to='/todo/26'> To-Do: </Link> </div>
                <div className="day">27 <Link to='/todo/27'> To-Do: </Link> </div>
                <div className="day">28 <Link to='/todo/28'> To-Do: </Link> </div>
            </div>
        </div>
    );
}

export default Calendar

todolist.jsx

import './todolist.css'
import React from "react";
import { NavLink } from "react-router-dom";
import { useParams } from 'react-router-dom';

const ToDo = () => {
  const {id} = useParams()
  const [todos, setTodos] = React.useState(() => JSON.parse(localStorage.getItem(`todos-${id}`)) || []);
  const [todo, setTodo] = React.useState("");
  const [todoEditing, setTodoEditing] = React.useState(null);
  const [editingText, setEditingText] = React.useState("");

  React.useEffect(() => {
    const json = JSON.stringify(todos);
    localStorage.setItem(`todos-${id}`, json);
  }, [todos, id]);

  function handleSubmit(e) {
    e.preventDefault();
    const newTodo = {
      id: new Date().getTime(),
      text: todo,
      completed: false,
    };
    setTodos([...todos].concat(newTodo));
    setTodo("");
  }

  function deleteTodo(id) {
    let updatedTodos = [...todos].filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  }

  function toggleComplete(id) {
    let updatedTodos = [...todos].map((todo) => {
      if (todo.id === id) {
        todo.completed = !todo.completed;
      }
      return todo;
    });
    setTodos(updatedTodos);
  }

  function submitEdits(id) {
    const updatedTodos = [...todos].map((todo) => {
      if (todo.id === id) {
        todo.text = editingText;
      }
      return todo;
    });
    setTodos(updatedTodos);
    setTodoEditing(null);
  }


  return (
    <div>
      <div align='right'>
        <NavLink to='/' style={{textDecoration: 'none', color: 'black'}}><button className='btn'> Calendar View </button></NavLink>
      </div>
      <div id="todo-list">
        <h1>To-Do For Today</h1>
        <h2> Total Tasks: {todos.length} </h2>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            onChange={(e) => setTodo(e.target.value)}
            value={todo}
          />
          <button className="btn">Add To-Do</button>
        </form>
        {todos.map((todo) => (
          <div key={todo.id} className="todo">
            <div className="todo-text">
              <input
                type="checkbox"
                id="completed"
                checked={todo.completed}
                onChange={() => toggleComplete(todo.id)}
              />
              {todo.id === todoEditing ? (
                <input
                  type="text"
                  onChange={(e) => setEditingText(e.target.value)}
                />
              ) : (
                <div>{todo.text}</div>
              )}
            </div>
            <div className="todo-actions">
              {todo.id === todoEditing ? (
                <button className='btnXS' onClick={() => submitEdits(todo.id)}>Submit</button>
              ) : (
                <button className='btnXS' onClick={() => setTodoEditing(todo.id)}>Edit</button>
              )}

              <button className='btnXS' onClick={() => deleteTodo(todo.id)}>Delete</button>

            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ToDo;

I am trying to built a calendar web app with daily to-do lists. So when clicking on the link on any day, the user should be able to add and edit what to do for that day. But I would also like to show the total number of todos added for each day in the calendar page. E.g. 1 To-Do: "show total numbers of to-dos for this day"

I tried calling {todos.length} on the calendar page, but it always shows 0.

Is the react page re-rendering? Try putting a console.log in to check it. I suspect because you are spreading your ...todos into the array, its changing the original value by reference. So react doesn't think its changed. Maybe instead of spread set it as todos.slice() to ensure its not mutating the value — Steve Tomlin, Feb 13 '23 at 14:56

score 0 · Accepted Answer · answered Feb 13 '23 at 15:23

I edit your Calendar.jsx and add new Day Component :

import './calendar.css'
import {Link} from 'react-router-dom'
import React from "react";

const Calendar = () => {

    return (
        <div className="month">
            <h1> February 2023 </h1>
            <div className="names">
                <div className="weekNames">Monday</div>
                <div className="weekNames">Tuesday</div>
                <div className="weekNames">Wednesday</div>
                <div className="weekNames">Thursday</div>
                <div className="weekNames">Friday</div>
                <div className="weekNames">Saturday</div>
                <div className="weekNames">Sunday</div>
            </div>
            <div className="week">
                <Day number={1} />
                <Day number={2} />
                <Day number={3} />
                <Day number={4} />
                <Day number={5} />
                <Day number={6} />
                <Day number={7} />
            </div>
        </div>
    );
}


function Day({number}){
  const [todos, setTodos] = React.useState(() => JSON.parse(localStorage.getItem(`todos-${id}`)) || []);
  return (<div className="day">{number} <Link to={`/todo/${number}`}> To-Do: {todos.length} </Link> </div>);
}

export default Calendar;

Is that what you meant?

How to pass data between pages in react when using useparams()?

1 Answers1