<TabPanel>
  <Dietracker dataFromParent={date} />
  <Link to="/cdiet">
    <button onClick={this.closeTabBox}>edit</button>
  </Link>
</TabPanel>

I am trying to pass dataFromParent={date} to <CDietOverview /> in navigator.js when the edit button is clicked without changing the path

<Route path="/cdiet">
  <CDietOverview />
</Route>

this is the CDietOverview file how show the date in this file ' const { date } = this.props.location.state' i thried like this but error says TypeError: Cannot read properties of undefined (reading 'state')

import React from "react";
import axios from "axios";
import Sidebar from "../components/sidebar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBell, faUser, faBars } from "@fortawesome/free-solid-svg-icons";
import Toggler from "../toggle";
import { useLocation } from "react-router-dom";
import ClientProfile from "../tog_profile";
//import DailyTrackerTabs from './components/daily_tracker';
import DietTrackerTabs from "../components/diet_tracker_tabs";
import Calendar from "../components/calendar";
import Experts from "../components/experts";
import Greet from "../components/greet";

export default class Overview extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true, isProfile: true, items: [] };
    this.handleClick = this.handleClick.bind(this);
    this.setWrap = this.setWrap.bind(this);
    this.clickedOutside = this.clickedOutside.bind(this);
    this.profileHandler = this.profileHandler.bind(this);
    if(props.location.state)
  
    const { date } = props.location.state;
    console.log(date);
 
  }
 

  componentDidMount() {
    const { date } = this.props.location.state;

    const config = {
      headers: {
        Authorization: `token `   localStorage.getItem("token"),
      },
    };

    axios
      .get(
        "url",
        config
      )
      .then((res) => {
        console.log(res.data);
        this.setState({ items: res.data });
      });
  }

  render() {
    function openMenu() {
      document.querySelector(".sidebar").classList.toggle("show");
    }

    return (
      <div className="App">
        <Sidebar />
        <header className="overview">
          <div
            className="top-header"
            ref={this.setWrap}
            style={{ padding: "2% 10%", textAlign: "right" }}
          >
            {" "}
            <div>{this.state.isToggleOn ? null : <Toggler />}</div>
            <span>
              <FontAwesomeIcon
                onClick={this.handleClick}
                style={{ marginRight: "1rem", cursor: "pointer" }}
                icon={faBell}
              />
            </span>
            <span>
              <FontAwesomeIcon
                onClick={this.profileHandler}
                style={{ cursor: "pointer" }}
                icon={faUser}
              />
            </span>{" "}
            {this.state.items.firstname} {this.props.childern}
            {this.state.isProfile ? null : <ClientProfile />}{" "}
          </div>

          <div style={{ width: "89%", display: "flex", paddingLeft: "10px" }}>
            <span onClick={openMenu} className="menu">
              <FontAwesomeIcon
                style={{ marginRight: "20px" }}
                icon={faBars}
                className="menu-icon"
              />
            </span>
            <span style={{ whiteSpace: "nowrap" }}>Daily Tracker</span>
            <div style={{ padding: "4px", width: "100%" }}>
              <hr style={{ background: "white", color: "white" }} />
            </div>
          </div>
          <div className="mwrapper">
            <div className="mleft">
              <Greet />
              <DietTrackerTabs />
            </div>
            <div className="mright">
              <Calendar />
              <div
                style={{
                  fontWeight: "bold",
                  textAlign: "left",
                  paddingLeft: "10px",
                }}
              >
                <small style={{ textTransform: "uppercase" }}>Experts</small>
              </div>
              <Experts />
            </div>
          </div>
        </header>
      </div>
    );
  }
}

this is the CDietOverview file im getting

CodePudding user response：

You can pass parameters with Link:

<Link to={{
           pathname: '/cdiet',
           state: {date}
          }}
>
  <button onClick={this.closeTabBox}>edit</button>
</Link>

In CDietOverview:

const {date} = props.location.state;

CodePudding user response：

Passing data with Link

<Link 
  to = {{
          pathname: `/{path}/${item}`,
          state: {Data}
       }}
>Text or Button</Link>

Retrieve data i.e. passed through link

let retrieve_var = props.location.state