insert object to another array of object in reactjs/javascript

Question

Hi was trying to implement a Collection Visit Plan on my reactJs Application.

Basically it starts from supervisor planning at SOD (Start of Day) time to arrange a collection visit for the Field Collection Officer.

the initial Data Visit Plan are receive from API form as an array of objects below :

intialVisitPLanData:[{
            id:1,
            custName:'Mr. John',
            address:'St. Lorem ipsum dolor sit.',
            fieldcoll:'Officer 01',
            isVisited:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
        },
        {
            id:2,
            custName:'Mr. Jack',
            address:'St. Lorem ipsum dolor sit.',
            fieldcoll:'Officer 02',
            isVisited:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
        },
        ... more objects here
    ]

I've managed to Render this Data as table Rows and put checkbox on each rows . So Supervisor can select which customers he want based on checkbox that selected.

The Question is how do i make a new visitPlan array of objects based on those selected rows and preserve the initial object structure (object key property)(the initialVisitPlanData that has been checked)

example :
object structure ready to inserted to new object
{id:null,custname:null,etc} 

* initial data :
this.state = {
   visitPlan:[]
}

I don't know the method to approach this requirement.

Thanks in advance

Answer 1

Here's a quick demo for you:

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedItems: new Set(), // which plans we have "checked".
      intialVisitPLanData:[{
            id:1,
            custName:'Mr. John',
            address:'St. Lorem ipsum dolor sit.',
            fieldcoll:'Officer 01',
            isVisited:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
        },
        {
            id:2,
            custName:'Mr. Jack',
            address:'St. Lorem ipsum dolor sit.',
            fieldcoll:'Officer 02',
            isVisited:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
            isWarnLetter1:null,
        }
      ]
    };
  }
  
  toggleItem = (id) => {
    let tempSet = new Set(this.state.selectedItems);
    if (!tempSet.delete(id)) {  // try and delete an item. If it fails, it didn't exist before...
      tempSet.add(id);  // ...so we add it instead.
    }
    this.setState({selectedItems: tempSet});
  }
  
  create = () => {
    let arr = [];
    this.state.selectedItems.forEach((id) => {  // for each "checked" item...
      let data = this.state.intialVisitPLanData.find((item) => {
        if(id === item.id) return true;  // ... find and return the initialVisitPlanData with id equal to the selected value
        return false;
      });
      arr.push(Object.assign({}, data));  // push it into our new array
    });
    console.log(arr);
  }
  
  render() {
    return (
      <div>
        {this.state.intialVisitPLanData.map(item => {
          return (
            <div id={item.id}>
              <input type="checkbox" checked={this.state.selectedItems.has(item.id)} onChange={this.toggleItem.bind(this, item.id)} />
              <span>{item.custName}</span>
            </div>
          )})
        }
        <button onClick={this.create}>Create</button>
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

I have added your initialVisitPLanData to the state (you might want to change it into proper camel-case) as well as a selectedItems Set which keeps track of the items you select in the list.

There is also a button which creates an array of the copied plan data, without mutating the original object.