CODEWITHSUNDEEP
reactjsimportreact-hooksexport
Samandar Yusupov
Samandar Yusupov

Reputation: 61

pass a variable which is inside a React function

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

Answers (1)

rajesh pillai
rajesh pillai

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.

  1. Pass data as props and use events to communicate data changes back to parent.
  2. If global data/or shared data use Context API.

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

Related Questions