El problema actual es que en el componente Proveedores, el método de representación del componente proporciona una matriz de proveedores e intenta obtener datos de esa matriz, en lugar de un solo objeto. <h3>{vendors.title}</h3> no devolverá el título, porque los proveedores son una matriz, no un solo objeto con una propiedad para el title .

Por eso nada rinde. Sin embargo, el problema es que no puede simplemente iterar en esa lista en el componente Proveedor, porque en este momento ese componente no sabe qué proveedor mostrar. Un padre debe pasar un objeto de proveedor a este componente secundario. ¡Aquí hay un ejemplo!

Si cada botón abre un modal para un proveedor específico, VendorList podría vivir más arriba en la estructura del componente para transmitir la información necesaria, así:

 function App() { let vendors = [ { id: 1, title: 'Vendor 1 Name', }, { id: 2, title: 'Vendor 2 Name' } ] return( <div className='App'> <Map /> <Info /> </div> {/* create 1 button per vendor */} {vendors.map(vendor => ( <div className='app__button'> <Button vendor={vendor} /> </div> ))} ); } // button now receives a single vendor on the props obj const Button = (props) => { const [buttonPopup, setButtonPopup] = useState(false); return( <div className='popup'> <button onClick={() => setButtonPopup(true)}>Button</button> <Popup trigger={buttonPopup} setTrigger={setButtonPopup} vendor={props.vendor} /> </div> ) } // keep passing the vendor in the props... const Popup = (props) => { return (props.trigger) ? ( <div className='popup-inner'> <button className='close-button' onClick={() => props.setTrigger(false)}>X</button> {props.children} <Vendor vendor={props.vendor}/> </div> ) : ""; }; // until finally the Vendor component receives the individual vendor it should display const Vendor = (props) => { return ( <div className='card' key={props.vendor.id}> <h3>{props.vendor.title}</h3> <h3>{props.vendor.hours}</h3> </div> ) }

¡Esta cantidad de transferencia de accesorios no siempre es ideal, pero es una buena manera de aprender a mover datos entre los componentes de React! ¡Espero que esto ayude!

Parece que cometió un error en su archivo Vendor.js, tiene una matriz de proveedores pero la muestra como si fuera un solo objeto. Tienes que hacer un mapa sobre él así:

final de Proveedor.js:

 return ( <> {vendors.map((vendor) => ( <div className="card" key={vendor.id}> <h3>{vendor.title}</h3> <h3>{vendor.hours}</h3> </div> ))} </> )

Pero si desea obtener un botón por proveedor y mostrar en una ventana emergente la información de ese proveedor, debe hacer lo siguiente:

Proveedor.js:

 import React from './react'; const Vendor = ({vendor}) => { return ( <div className='card' key={vendor.id}> <h3>{vendor.title}</h3> <h3>{vendor.hours}</h3> </div> ) } export default Vendor;

Aplicación.js:

 function App() { let vendors = [ { id: 1, title: 'Vendor 1 Name', }, { id: 2, title: 'Vendor 2 Name' } ] const [vendorsList, setVendorsList] = useState([]); useEffect(() => { setVendorsList([...vendors]); }, []); return( <div className='App'> <Map /> <Info /> </div> <div className='app__button'> {vendors.map((vendor) => (<Button vendor={ vendor } />)} </div> ); }

Botón.js:

 const Button = ({vendor}) => { const [buttonPopup, setButtonPopup] = useState(false); return( <div className='popup'> <button onClick={() => setButtonPopup(true)}>Button</button> <Popup trigger={buttonPopup} setTrigger={setButtonPopup} vendor={ vendor } /> </div> ) }

Ventana emergente.js:

 const Popup = (props) => { return (props.trigger) ? ( <div className='popup-inner'> <button className='close-button' onClick={() => props.setTrigger(false)}>X</button> {props.children} <Vendor vendor={ props.vendor }/> </div> ) : ""; };

Entonces, tiene una lista de proveedores con identificaciones asociadas, la mejor manera de obtener los datos en el modal sería pasar la identificación del proveedor a la ventana emergente, luego obtener el proveedor de la lista con la identificación coincidente desde dentro de la ventana emergente.

Haría esto haciendo que la lista de proveedores que se encuentra actualmente en el componente de proveedores viva fuera del componente y se exporte para que pueda usarla en todas partes. Luego, el componente del proveedor toma una identificación y obtiene el proveedor con esa identificación haciendo lo siguiente:

const proveedor = Proveedores.find(proveedor => proveedor.Id === Id);

Luego renderiza... vendedor.título... ... vendedor.horas... En su componente de proveedor.

Espero que esto ayude, lo escribo en mi teléfono, ¡así que por favor lmk si tiene preguntas!