Reputation: 61
I have this React component
import React from "react";
import "./search.css";
// Table package
import MaterialTable from 'material-table';
function BasicSearch(props) {
return (
<div className="hovered-styled-row">
<MaterialTable
title="Students"
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' }
]}
data={props.data}
options={{
search: true
}}
actions={[
{
icon: "add",
tooltip: 'Save User',
onClick: (event, rowData) => {
// console.log(rowData);
}
}
]}
/>
</div>
)
}
export default BasicSearch;
I am using Material Design for this component. I need to export a rowData
variable which is inside
actions inside onClick.
Then the container which imports this function should be able to use this data inside a container itself. when the rowData
changes the data inside a container should also change. i mean the rowData
has to be
in the form of a useState function
Upvotes: 0
Views: 49
Reputation: 8128
The approach you are taking is wrong. The below are the ways to pass data from one component to another depending on your design structure.
Without full context of how the data is intend to be used and how the final jsx looks like, it's difficult to further update this answer.
Upvotes: 1