How to pass useState Value from One Component to another one in React.js

Question

Quick help here! I have VendorDetailsBrief.js and VendorsList.js components in my react project. In VendorDetailsBrief.js I have a clickedAsset state which changes it's value when it's clicked. I want this state value to be passed to VendorsList.js component.

Here is the code.

VendorDetailsBrief.js

import React, { useState, useEffect } from "react";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import axios from "axios";
import "./ModalVendors.css";
import VendersDetail from "./VendorsDetail";
import { Link } from "react-router-dom";
const VendorDetailsBrief = ({ setOpenModalVendors }) => {
  const [data, setData] = useState({});
  const [clickedAsset, setClickedAsset] = useState("");
  const [hide, setHide] = useState(false);

  const baseURL =
    "http://127.0.0.1:8000/api/business_process/business-impact/vendor-product-detail";

  useEffect(() => {
    axios
      .get(baseURL)
      .then((response) => {
        setData(response.data);
      })
      .then(
        (response) => {},
        (err) => {
          alert("No Data To Show");
        }
      )
      .catch((err) => {
        return false;
      });
  }, []);
  const DisplayData = data.vendor_product?.map((vendor) => {
    return (
      <tr>
        <td>{vendor.vendor}</td>
        <td onClick={() => setClickedAsset(vendor.cpe)}>
          <Link to="/vendor_details">{vendor.product}</Link>
        </td>
      </tr>
    );
  });
  return (
    <div className="modalBackgroundVendors">
      <div className="modalContainerVendors">
        <div className="titleCloseBtnVendors">
          <button
            onClick={() => {
              setOpenModalVendors(false);
            }}
          >
            X
          </button>
        </div>
        <div className="z-100">
          <div className="text-black">
            <div className="rounded overflow-hidden flex  justify-center items-center">
              <table class="GeneratedTable">
                <thead>
                  <tr>
                    <th>Vendor</th>
                    <th>Product</th>
                  </tr>
                </thead>
                <tbody>{DisplayData}</tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VendorDetailsBrief;

VendorsList.js

import React from "react";

const VendorsList = () => {
  return <div></div>;
};

export default VendorsList;

How can I do this? I need your help

As react possesses one way data flow i.e parent to child. you can't inherit data other-way . To achieve this, you can use external libraries like redux,flux etc or react's own CONTEXT API. reference.. https://reactjs.org/docs/hooks-reference.html#usecontext — MhkAsif, Dec 18 '21 at 09:53
Router is defined in App.js and my question has nothing to do with Routers. @Spankied — Teshie Ethiopia, Dec 18 '21 at 09:58
Perhaps you should checkout more tutorials on basics of react and component libraries. @TeshieEthiopia — Spankied, Dec 18 '21 at 10:36
Does this answer your question? [react-router - pass props to handler component](https://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component) — Spankied, Dec 18 '21 at 10:41

score 0 · Answer 1 · answered Dec 18 '21 at 10:22

0

if VendorsList.js is parent of VendorDetailsBrief.js you can use lifting state up

answered Dec 18 '21 at 10:22

Mostafa Tabatabaei

189
2
8

How to pass useState Value from One Component to another one in React.js

1 Answers1