0
269
ViewsHow to pass button value to another component in React
I want to pass table cell data(URL) to another IFrame component.
The web app is used to preview CSV URL data, Once the URL clicked I want to show the web in the IFrame.
<table className="table table-responsive overflow-x">
<tbody>
{items.map((d, x) => (
<tr key={d.x}>
<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>
Iframe Component
How can I do this?
Thanks.
·
Juan Pablo Isaza
1 answers
Answer question0
Remove the double qoutes " " from:
<Iframe url="{props.url}" />
Should be like this:
<Iframe url={props.url} />
in general if you want to pass something from Parent component to child component, will be like this:
Parent component:
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>)
}
Child component:
import React from 'react';
export default function Child(props){
return (<div>
<p> item from Parent component: {props.item} </p>
</div>);
}
·
Juan Pablo Isaza
Report
Answer question