¡Se necesita ayuda rápida! Tengo dos componentes de React Vendors y VendorsList . En Vendors.js Component tengo el texto asset.asset_name representado en formato de tabla. Lo que quiero es, cuando hago clic en I asset.asset_name , quería pasar su valor del componente Vendors al componente VendorsList . ¿Cómo podría hacer esto?
Aquí está el código para dos componentes
Proveedores.js
import React, { useEffect, useState } from "react"; import { axios } from "axios"; const Vendors = () => { const [data, setData] = useState({}); const baseURL = "http://127.0.0.1:8000/api/business_process/business-impact/business-assets-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.business_assets?.map((asset) => { return ( <tr> <td>{asset.business_assets}</td> <td onClick={() => alert(asset.asset_name)}>{asset.asset_name}</td> </tr> ); }); return <div></div>; }; export default Vendors;Aquí está VendorsList.js
import React from "react"; const VendorsList = () => { return ( <div> <h1>{foo}</h1> </div> ); }; export default VendorsList;Necesito que el valor de asset.asset_name se pase a VendorsList cuando hago clic en el valor de asset.asset_name del componente Vendors
No creo que esté pasando el nombre del activo a VendorsList asset_name absoluto. Creo que la forma más rápida es representar directamente VendorsList en su componente Vendors colocándolo en el retorno de su componente Vendors . También necesitaría algo para registrar lo que ha hecho clic para que pueda usar otro useState para esto. A continuación se muestra cómo lograría esto:
Modifique su Vendor.js para que se vea así:
import React, { useEffect, useState } from "react"; import { axios } from "axios"; import VendorsList from '<path to your VendorList component>' const Vendors = () => { const [data, setData] = useState({}); const [clickedAsset, setClickedAsset] = useState() const baseURL = "http://127.0.0.1:8000/api/business_process/business-impact/business-assets-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.business_assets?.map((asset) => { return ( <tr> <td>{asset.business_assets}</td> <td onClick={() => setClickedAsset(asset.asset_name)}>{asset.asset_name}</td> </tr> ); }); return ( <div> <DisplayData/> <VendorList clickedAssetName={clickedAsset}/> </div> ); }; export default Vendors; Luego, para usar el clickedAssetName que acaba de pasar, acceda a él de esta manera en su componente VendorsList.js :
import React from "react"; const VendorsList = ({clickedAssetName}) => { return ( <div> <h1>{clickedAssetName}</h1> </div> ); }; export default VendorsList;