How to make the content {todo.title} clickable and how to use link for routing it to different page-CodePudding

I want the content of {todo.title} to be clickable and after clicked it should route to different page and display some more information. I want this to happen using <link> tag, route, and not <a>. I have done this using react and wanted url-param to be utilized while routing to next page.

enter image description here

import 'bootstrap/dist/css/bootstrap.min.css';
import React, { useEffect, useState } from 'react';
import { Route } from 'react-router-dom'
import './App.css';
//import TodoList from './components/TodoList';

function App() {
  const [todos, setTodos] = useState([]);

  const fetchData = () => {
    fetch(`https://jsonplaceholder.typicode.com/todos?userId=1`)
      .then((response) => response.json())
      .then((actualData) => {
        // console.log(actualData)
        setTodos(actualData)
        console.log(todos);
      })
  };

  const updateData = (e) => {
    const id = e.target.id;
    const checked = e.target.checked;

    console.log(id, checked);
    if (checked) {
      fetch('https://jsonplaceholder.typicode.com/todos/id', {
        method: 'PATCH',
        body: JSON.stringify({
          completed: true,

        }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      })
        .then((response) => response.json())
        .then((json) => console.log(json));
    } else {
      fetch('https://jsonplaceholder.typicode.com/todos/id', {
        method: 'PATCH',
        body: JSON.stringify({
          completed: false,

        }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      })
        .then((response) => response.json())
        .then((json) => console.log(json));
    }

  }

  useEffect(() => {
    fetchData();
  }, [])

  /*checked={todo.completed}*/
  return (
    <div >
      <div className="window d-flex flex-column  justify-content-center align-items-center">
        <div className="d-flex flex-column   align-items-center bg-info rounded border border-danger ">
          <div className="p-2 "><h1>todo list</h1></div>
          <div className="p-2 border border-danger">
            <ul className="List-group">
              {todos.map((todo) =>
                <li className="list-group-item d-flex justify-content-between align-items-center" key={todo.id}>
                  {/*
                    <link to=''>{todo.title}</link>
              */ }
                  <a href='./more.js?id' >{todo.title}</a>
                  <input type='checkbox' id={todo.id} onChange={updateData} />
                </li>)
              }
            </ul >
          </div>
        </div>
      </div>



    </div>
    /* <div>
       {
         <TodoList todos={todos} />
       }
     </div>*/
  );
}
export default App;

CodePudding user response：

Simply use useNavigate from react-router-dom with onClick in react component which you want to made clickable.

import 'bootstrap/dist/css/bootstrap.min.css';
import React, { useEffect, useState } from 'react';
import { Route, useNavigate } from 'react-router-dom'  //change here
import './App.css';
//import TodoList from './components/TodoList';

function App() {
  const [todos, setTodos] = useState([]);
  const navg = useNavigate(); //change here 
  <div>
  /* Rest of the code */
       {
         <TodoList todos={todos} onClick={() => {navg('/redirect_router')}/>
       }
     </div>*/
  );
}
export default App;

CodePudding user response：

you need 2 changes:

1- this is for do update with correct id

`https://jsonplaceholder.typicode.com/todos/${id}`

2- this is for send user to page with correct id in url

 <link to=`/yoururl/${todo.id}`>{todo.title}</link>