CODEWITHSUNDEEP
javascriptreactjs
DJ2
DJ2

Reputation: 1741

Filter and map over updated array and render in table

Sandbox for the example below can be found here.

I have a table of schedules that can be marked for export via a slider. If a schedule is marked for export the below function will update an array with the value of id. So for example if two schedules were marked for export the updated array would look like this: ["704", "1403"].

The values from the updated array are then mirrored in a different table that shows they are indeed marked for export. If you look at the sandbox, it's only rendering the id, but I want all the values from each schedule to be rendered in the export table. 

  slider = ({ id, startTime, selfUri, status, isExported }) => {
    if (isExported === true) {
      this.setState(
        {
          scheduleIdsToExport: [id, ...this.state.scheduleIdsToExport],
          startTime,
          selfUri,
          status
        },
        () => console.log(this.state.scheduleIdsToExport)
      );
    } else {
      const newArray = this.state.scheduleIdsToExport.filter(
        storedId => storedId !== id,
        storedSelfUri => storedSelfUri !== selfUri
      );
      this.setState(
        {
          scheduleIdsToExport: newArray
        },
        () => console.log(this.state.scheduleIdsToExport)
      );
    }
  };

I'm mapping over the updated array schedulesIdsToExport to render in the export table like this:

<Table.Body>
  {Object.keys(scheduleIdsToExport)
    .filter(id => id !== undefined)
    .map(id => {
      return (
        <Table.Row>
          <Table.Cell>{scheduleIdsToExport[id]}</Table.Cell>
        </Table.Row>
      );
    })}
</Table.Body>

I want to keep the array scheduleIdsToExport in tact, but also have an array schedulesToExport that has all the schedules and its values so I can use that in rendering the export table.

So do I need to add all the keys of schedules to the .map()? I've tried a few different arrangements and gotten weird outcomes.

EDIT: Changes to the slider function, still having trouble with render

  slider = ({ id, startTime, selfUri, status, isExported }) => {
    if (isExported === true) {
      this.setState(
        {
          scheduleIdsToExport: [id, ...this.state.scheduleIdsToExport],
          schedulesToExport: [
            id,
            status,
            selfUri,
            startTime,
            ...this.state.schedulesToExport
          ]
        },
        () => {
          console.log(this.state.scheduleIdsToExport);
          console.log(this.state.schedulesToExport);
        }
      ); ...
  };

Upvotes: 1

Views: 60

Answers (1)

Dito
Dito

Reputation: 995

why dont you do it like this?

<Table.Body>
  {schedules
    .filter(schedule => scheduleIdsToExport.includes(schedule.id))
    .map(item => {
         return (
           <Table.Row>
              <Table.Cell>{item.id}</Table.Cell>
              <Table.Cell>{item.startTime}</Table.Cell>
              <Table.Cell>{item.selfUri}</Table.Cell>
              <Table.Cell>{item.status}</Table.Cell>
            </Table.Row>
         );
     })}
</Table.Body>

Upvotes: 3

Related Questions