Save whole row into an array instate

Question

I am a JavaScript beginner and don't know how to search exactly what I am trying to accomplish...

I have the below array, which I display on the page in a table format, row by row.

[
    0: {
        cuip: ".A0100",
        quantity: 38,
        ...
    }
    1: {
        cuip: ".A0102",
        quantity: 1,
        ...
    }
    ...
]

When user selects any item in the list, I mark the checkbox next to that row selected by the toggle below

  toggleRow(cuip) {
    const newSelected = Object.assign({}, this.state.selected);
    newSelected[cuip] = !this.state.selected[cuip];
    this.setState({
      selected: newSelected,
      selectAll: 2
    });
  }

What I end up in the state with the selected is

{.A0100: true, ...}

Which is great. so if user selects 1, multiple or all rows, I have those rows cuips saved as true in the state. Trouble is, I need to save certain values in the row like ste, clt, quantity, etc .. ie:

[
    {
        ...
            "cuip": ".A0102",
            "clt": "asvd",
            "ste": "v31r",
            "quantity": 3,
        ...
    }, {
        ...
            "clt": "vr13",
            "ste": "vr31",
            "quantity": 6,
        ...
    },
]

Answer 1

You can store (and later remove) a reference to your whole row instead of a boolean value to have access to every field.

// Sample storage and a sample row
const selected = {};
const row = { cuip: '.A0100', quantity: 38 };

// Add a row
selected[row.cuip] = row;

// Check if a row is selected
const isRowSelected = selected.hasOwnProperty(row.cuip);

// Remove a row
delete selected[row.cuip];

You can bind this to your state management in the same way you've already demonstrated.
See the MDN articles on the delete operator and Object.hasOwnProperty() for further info.

Answer 2

Pass the index of each row to your onChange event of your radio, when the user clicks it get the index and save it to selected array.

onChange = (e) => {
  // uses row index and get the selected item from the array 
  const selected = this.state.data[e.target.dataset.index];

  const selectedState = this.state.selected;

  this.setState({
    selected: [...selectedState, selected] // add  the selected item to the selected array
  })

}

 table, th, td { border: 1px solid black; border-collapse: collapse; } table { width: 100% } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> <div id="root"></div> <script type="text/babel"> class App extends React.Component { state = { data: [ { cuip: '.A0100', quantity: 38, ste: 'some value', clt: 'value' }, { cuip: '.A0100', quantity: 38, ste: 'some value', clt: 'value' }, { cuip: '.A0100', quantity: 38, ste: 'some value', clt: 'value' }, { cuip: '.A0100', quantity: 38, ste: 'some value', clt: 'value' } ], selected: [], show: false, }; onChange = (e) => { const selected = this.state.data[e.target.dataset.index]; const selectedState = this.state.selected; this.setState({ selected: [...selectedState, selected] }) } show = () => { this.setState({ show: true }) } render() { const tr = this.state.data.map((item, index) => <tr key="index"><td>{item.cuip}</td><td>{item.clt}</td><td>{item.ste}</td><td>{item.quantity}</td><td><input onChange={this.onChange} data-index={index} type="radio" /></td></tr>); return ( <div> <table> <thead> <tr> <th>cuip</th> <th>clt</th> <th>ste</th> <th>quantity</th> </tr> </thead> <tbody>{tr}</tbody> </table> <br/> <button onClick={this.show}>show selected</button> { this.state.show && <p>{JSON.stringify(this.state.selected)}</p> } </div> ); } } ReactDOM.render(<App />, document.getElementById("root")); </script> 

Answer 3

You could find the specific row that you selected and save that in a selected array

For instance:

//you can have a state of selected rows
state = {
  selectedRows: []
}
toggleRow(cuip) {
    const newSelected = Object.assign({}, this.state.selected);
    newSelected[cuip] = !this.state.selected[cuip];
..
    const {selectedRows, /* this is where your data is stored -> */ rows} = this.state;
    const findSelected = rows.find(row => row.cuip === cuip);
    const selected = [...selectedRows, findSelected]
    this.setState({
      selected: newSelected,
      selectAll: 2,
      selectedRows: selected  
    });
  }

Sorry If I understood wrong, but is that what you were looking for?