Quiero pasar datos de celda de tabla (URL) a otro componente de IFrame.
La aplicación web se usa para obtener una vista previa de los datos de la URL CSV. Una vez que se hace clic en la URL, quiero mostrar la web en el IFrame.
<table className="table table-responsive overflow-x"> <tbody> {items.map((d, x) => ( <tr key={dx}> <td scope="row">{x + 1}</td> <td id="urlcol"> <button className="btn" onClick={(e) => this.onClick(e)}> {d.Link_Address}{" "} </button> </td> </tr> ))} </tbody> </table>Componente de marco flotante
¿Cómo puedo hacer esto?
Gracias.
Eliminar las comillas dobles " " de:
<Iframe url="{props.url}" />Debería ser así:
<Iframe url={props.url} />en general, si desea pasar algo del componente principal al componente secundario, será así:
Componente principal:
import React, { useState } from 'react'; import Child from './Child.js'; export default function Parent(){ //you can put anything in inside useEffect, not only an array const [items, setItems] = useState(['item1','item2','item3']); const [currentItem, setCurrentItem] = useState('item1'); const changeCurrentItem = (item)=> { setCurrentItem(item); } return (<div> {items.map((item, key)=> {return <button key={key} onClick={()=> changeCurrentItem(item)} > {item} </button>})} <div className='child-component-container'> <Child item={currentItem} /> </div> </div>) }Componente hijo:
import React from 'react'; export default function Child(props){ return (<div> <p> item from Parent component: {props.item} </p> </div>); }