How to pass array data to another page in React?

Question

I have a table in my main page lets say main.js, All I want is that every click in a row of the table I want it to display the data in my drawer. Anybody knows how to achieve this?. I followed a few examples but I can't get it right.

When the drawer is closed:

and I like to display it into this drawer.

But my Drawer and my Table are separate files so

Here's my code:

class Main extends React.Component {

    render(){

        return (
            <Table multiSelectable={this.state.multiSelectable} 
                onRowSelection={this._onRowSelection}>

                <TableHeader>

                    <TableRow>

                        <TableHeaderColumn style={tablestyles.columns.id}>
                            ID
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.name}>
                            Name
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.price}>
                            Price
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.category}>
                            Category
                        </TableHeaderColumn>
                        <TableHeaderColumn style={tablestyles.columns.edit}>
                            Edit
                        </TableHeaderColumn>

                    </TableRow>

                </TableHeader>

                <TableBody>

                {Data.tablePage.items.map(item =>
                    <TableRow key={item.id}>

                        <TableRowColumn style={tablestyles.columns.id}>
                            {item.id}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.name}>
                            {item.name}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.price}>
                            {item.price}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.category}>
                            {item.category}
                        </TableRowColumn>

                        <TableRowColumn style={tablestyles.columns.edit}>
                            <Link className="button" to="/form">
                                <FloatingActionButton zDepth={0}
                                    mini={true} backgroundColor={grey200}
                                    iconStyle= {tablestyles.editButton}>
                                    <ContentCreate  />
                                </FloatingActionButton>
                            </Link>
                        </TableRowColumn>

                    </TableRow>

                ) }

            </TableBody>
        );
    }
};

export default CargoAddTable;

and I want to display the data in every click of the row into the white space inside the drawer.

and heres my code:

<Paper style={papers} zDepth={5}>
       {this.props.onRowSelection}
</Paper>

this gives me no error and no output.

By "another page" do you literally mean another page loaded from the server? Is this "another page" already loaded in another browser window?Or maybe you already have some sort of clientside routing. — Yury Tarabanko, Sep 06 '17 at 08:25
ahm actually I already use react router, and I want to fetch my selected row to my drawer. and how can it be done?. — Deee, Sep 06 '17 at 08:31
I would suggest to add a parameter with comma separated id values. — AirBorne04, Sep 06 '17 at 08:54
So `onRowSelect`, you want to redirect to another page using React Router, and display the data that you have just displayed? Are you using anything like Redux? Where are you currently storing the data? — Tim B James, Sep 06 '17 at 08:55
actually sir, the variable 'itemselected' I want the data inside that variable to pass it to my drawer. and my data is just a static just for now. — Deee, Sep 06 '17 at 09:01

Andrii Starusiev · Accepted Answer · 2021-10-26T08:05:24.737

8

If I understand you correctly, you need to have a common parent for your table and drawer components, which will get data from the table and pass it to the drawer:

import Table from './Table';
import Drawer from './Drawer';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedRow: {
        name: "",
        price: "",
        category: ""
      }
    }
    this.getRow = this.getRow.bind(this);
  }

  getRow(selectedRow) {
    this.setState({ selectedRow });
  }

  render() {
    return (
      <div>
        <Table getRow={this.getRow}/>
        <Drawer row={this.state.selectedRow}/>
      </div>
    );
  }
}

Full code: https://codesandbox.io/s/04363w7qn

Or check Redux.

edited Oct 26 '21 at 08:05

answered Sep 16 '17 at 10:54

Andrii Starusiev

7,564
2
28
37

yeah, your answer has some point but it didn't stack sir. and if I select more than 1 it only displays one value. – Deee Sep 18 '17 at 09:13
It's just point how to send data between components, what should be displayed when you select few rows? – Andrii Starusiev Sep 18 '17 at 09:35
it should display all data of the selected column. – Deee Sep 18 '17 at 09:57

score 3 · Answer 2 · answered Sep 07 '17 at 00:22

3

As I can't see a parent-child relationship in your example (there is a react pure solution if this is the case) assuming that those two pages has no dependencies between them, and can be load asynchronously, you can use third party libraries like react-pub-sub or postal-react-mixin, that allow you to publish/subscribe asynchronously to topics.

In your case, the topic should contain the object you want to share (selectedItem).

Then, you can publish that object from CargoAddTable component

_onRowSelection(key) {

     var itemselected = Data.tablePage.items[key];
     alert(key, itemselected);

     // Publish your object into 'Shared Item' topic.
     publish('Shared Item', itemSelected);
}

just to get it accesible from all the pages that are suscribed to that array. So, you can do it into your case sample.js

subscribe('Shared Item', callback);

and use the content from that suscription.

answered Sep 07 '17 at 00:22

Juan Rubio

101
1
9

can I really use it locally?. – Deee Sep 07 '17 at 00:49
What do you mean. Of course! npm install -s react-pubsub, and then take a look at the links avobe that will guide you to integrate the plugin into your code. – Juan Rubio Sep 07 '17 at 01:27
I mean I use that kind of libraries like MQTT but I just use it to communicate between different platform, thank you for that sir. – Deee Sep 07 '17 at 02:19
You're welcome! What i propose it's It's the same concept, but between react components, so you can use it in yor pages – Juan Rubio Sep 07 '17 at 09:15
Check this [post](https://stackoverflow.com/questions/21285923/reactjs-two-components-communicating) to understand common situations between react components. – Juan Rubio Sep 18 '17 at 16:47

score 3 · Answer 3 · answered Sep 13 '17 at 19:54

3

Please check the following example https://codesandbox.io/s/n2gqAxl7

answered Sep 13 '17 at 19:54

Deano

11,582
18
69
119

thanks, sir but I think you misunderstand my question. I edited it to make it more comprehensive. – Deee Sep 14 '17 at 01:33

score 3 · Answer 4 · answered Sep 15 '17 at 06:02

3

Try accessing the props data as {this.props.children}. Hopefully, it will work in your case. Reference Link

answered Sep 15 '17 at 06:02

Rohit Goyal

212
1
2
8

score 2 · Answer 5 · answered Sep 16 '17 at 04:18

2

You can pass the index or id of the active row through react router's dynamic routing and recover the data (table row) from your database based on the index or id.

answered Sep 16 '17 at 04:18

Snow Nickey

33
1
4

How to pass array data to another page in React?

5 Answers5