1

I have difficulties passing data into my Drawer. I want to select a row from a table in an Additem.js page and every click of the row I want the data inside it to display inside my drawer which is AdditemDrawer.js.

here's my code from Additem.js:

 //Additem.js
     RowSelection(key) {
        var itemselected = Data.tablePage.items[key];
          console.log(key, itemselected);
        }

        <Table multiSelectable={this.state.multiSelectable}
               onRowSelection={this.RowSelection}>
              <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}>
                    </TableRowColumn>
                  </TableRow>
                )}
              </TableBody>
            </Table>

I already store the row that been clicked in the itemselected variable, and here's my drawer code:

 //AdditemDrawer.js
  import Additem from '../containers/Additem';
    <Paper style={papers} zDepth={5} >
          <List additem={Additem.itemselected}>
          </List>
    </Paper>

but there is no output and error. how can I fix it?.

Dave Niaga Lape
  • 37
  • 1
  • 1
  • 6
  • I need to ask some further things to understand your question. When you are clicking table row from Additem.js, do you want to get selected row data from AdditemDrawer.js ? – Fatih Ayyildiz Sep 08 '17 at 06:53
  • yes sir, that is what I'm trying to solve. – Dave Niaga Lape Sep 08 '17 at 07:21
  • Oh ok. You can do this workaround I think. You can fire RowSelection function from AdditemDrawer.js . But RowSelection fire return some data. Now it just write console. This answer is also related with your issue I think. https://stackoverflow.com/a/43657889/4153009 – Fatih Ayyildiz Sep 08 '17 at 07:37

1 Answers1

0

I think doesn't work because it's out of scope. The best practice is using redux, please try it!

Estuardo Estrada
  • 101
  • 11