ReactJS Render Table for each value on Array

Question

I have a MultiSelect and a React Table.. the Select stores the values into value Array..

The way it is now i´m able to select ONE option and the table displays the data correctly. But, i´m looking to render a table for each selected option. How could i achieve something like this?

 handleSelectChange (value) {
   console.log('You\'ve selected:', value);
   this.setState({ value: value }, () => this.fetchTable());
 }
      
      
 fetchTable() {
   const url = 'http://localhost:8000/issues/from/';
   const value = this.state.value;
   const string = url+value;
   fetch(string)
   .then(function(response) {
     return response.json();
   })
   .then((myJson) => this.setState({data: myJson.issues}));
 }
 
 componentDidMount() {
   this.fetchData();
 }
 
 
 render() {
 
 const filteredResult = this.state.boards.map(item => (
       {
          value: item.key,
          label: item.name, 
    }
  ));
      
 const filteredResult1 = this.state.data.map(item => (
        {
          name: item.fields,
          id: item.id, 
          key: item.key,
   }
 ));
 
     return (
      <div>
        <Select
  closeOnSelect={!stayOpen}
  disabled={disabled}
  multi
  onChange={this.handleSelectChange}
  options={filteredResult}
  placeholder="Select Assignee(s)..."
        removeSelected={this.state.removeSelected}
     rtl={this.state.rtl}
  simpleValue
  value={value}
      />
      <ResponseTable data={filteredResult1} />
      </div>  

      
    );
  }
}

Can you tell me the relation between the filteredResult and filteredResult1. As the filteredResult1 is based on filteredResult, is there id mapping between these two. The selected options id will get the data for filteredResult2 — Jeeva, May 21 '18 at 09:13
@Jeeva I use FilteredResult to 'filter' the data, ( FilteredResult ) for the select, and ( FilteredResult1 ) for the table. Since the data i get from the FetchTable is Huge and i only need a few values! — zemmsoares, May 21 '18 at 09:16
yes, correct me if i am wrong, the filteredResult1(data) is based on the filteredResult(select option) right. Based on the id from filteredResult, you are fetching the data as filteredResult1. Is it correct? — Jeeva, May 21 '18 at 09:19
@TMG , i´m not sure how can i achieve it, i have to make a fetchTable for each value, and then that data from fetch must be saved in different state? like data1, data2? and then i also dont know how can i render the Table for each value.. — zemmsoares, May 21 '18 at 09:21

score 0 · Answer 1 · answered May 21 '18 at 09:21

How does your ResponseTable component look like? I guess you can just use the map function to loop and display the table rows. Sth like this:

const data = [{name: 'Test 1', id: 1, key: 'key_1'}, {name: 'Test 2', id: 2, key: 'key_2'}, {name: 'Test 3', id: 3, key: 'key_3'}];

_renderTableBody = () => {
   return data.map((item) => (
       return (
           <TableRow>
             <TableCell>item.name</TableCell>
             <TableCell>item.id</TableCell>
             <TableCell>item.key</TableCell>
           </TableRow>
       )
   ))
}

Then inside your render function, you can just replace this

<ResponseTable data={filteredResult1} />

into the code like this:

{this._renderTableHead()}  // same method as _renderTableBody() to generate the table head title
{this._renderTableBody()}

Hope this can help!

This is my React Table Component, https://jsfiddle.net/snt8qket/. The table is working fine displaying the data as it should, but i need to render Multiple Tables.. if my Data Array has 2 values for example [Elvis,Mike] then it will fetch values for Elvis and Mike, and render 2 Tables. — zemmsoares, May 21 '18 at 09:38
if you want to loop through the Data Array and render multiple tables, you can just wrap a map function to render the table by passing the value as a param inside the Data Array, you can check this out: https://stackoverflow.com/questions/47616355/react-foreach-in-jsx — Elvis Wong, May 21 '18 at 15:03

score 0 · Answer 2 · answered May 21 '18 at 10:47

Just keep some dummy key in state which as empty array initially. It will push the selected value of select option in to it. like below

constructor(props){
  this.state = {
    selectedValues: []
  }
}

Alter your handleSelectChange like below. It needs to update the current selected value in this array

 handleSelectChange (value) {
   console.log('You\'ve selected:', value);
   //this.setState({ value: value }, () => this.fetchTable());

   let currentSelectedValue = this.state.selectedValues.filter(selected => selected == value)  
   //it will return a value if it is found otherwise empty array will be returned

   if(currentSelectedValue.length == 0){
     let updatedSelectedValue = this.state.selectedValues.push(value)
     this.setState({ selectedValues: updatedSelectedValues }, () => this.fetchTable());
   }
 }

removeSelected (value) {
  console.log('You\'ve selected:', value);
  //this.setState({ value: value }, () => this.fetchTable());

  let currentSelectedValue = this.state.selectedValues.filter(selected => selected !== value)  //this will delete the removed option from array           

  this.setState({ selectedValues: currentSelectedValue }, () => this.fetchTable());
 }


fetchTable() {
   if( this.state.selectedValues.length > 0 ){
     this.state.selectedValues.map((value)=>{
       const url = 'http://localhost:8000/issues/from/';
       const string = url+value;
       fetch(string)
       .then(function(response) {
         return response.json();
       })
       .then((myJson) => this.setState({data: [...this.state.data, myJson.issues]})); //use spread operator to combine the result of each selectedValue
     });     
   }
 }

render() {

 const filteredResult = this.state.boards.map(item => (
   {
     value: item.key,
     label: item.name, 
   }
 ));

 const filteredResult1 = this.state.data.map(item => (
   {
     name: item.fields,
     id: item.id, 
     key: item.key,
   }
 ));

     return (
      <div>
        <Select
        closeOnSelect={!stayOpen}
        disabled={disabled}
        multi
        onChange={this.handleSelectChange}
        options={filteredResult}
        placeholder="Select Assignee(s)..."
        removeSelected={this.state.removeSelected}
        rtl={this.state.rtl}
        simpleValue
        value={value}
      />

      this.state.data.map((item) => {   // item here will hold the json object of { id: item.id, key: item.key, name: item.fields } 
        <ResponseTable data={item} />
      })

      </div>
    );
  }
}

ReactJS Render Table for each value on Array

2 Answers2