Step 4: How To Create A Semantic UI React Functional Table Component

step_4_suir_functional_table_component.js

//render the rows of data, including checkboxes
  //iterate over the array of scenarios
  //for each scenario return 1 table row of data
  //import useState from react

import React, {useState} from "react";
import scenarios from "./scenarios.json";
import { Table, Icon, Checkbox } from "semantic-ui-react";

function renderScenarioRows(scenarios) {
  return scenarios.map((scenario, index) => {
    let [unlocked, toggleUnlocked] = useState(false);
    let [completed, toggleCompleted] = useState(false);
    return (
      <Table.Row key={scenario.id} positive={completed}>
        <Table.Cell textAlign="center">
          {scenario.id}.
        </Table.Cell>
        <Table.Cell>
          {scenario.coords}
         </Table.Cell>
        <Table.Cell>
          {/* checkbox for if the scenario is unlocked */}
          {/* can't be unchecked if the scenario has already been marked completed */}
          <Checkbox
            onChange={() => toggleUnlocked(!unlocked)}
            checked={unlocked}
            disabled={completed}
          />
        </Table.Cell>
        <Table.Cell>
          {/* checkbox for if the scenario is completed */}
          {/* can' be checked if it's not unlocked */}
          <Checkbox
            onChange={() => toggleCompleted(!completed)}
            checked={completed}
            disabled={!unlocked}
          />
        </Table.Cell>
        <Table.Cell>
          {scenario.name}
        </Table.Cell>
      </Table.Row>
    );
  });
};

function ScenarioTable() {
  return (
    <div className="scenario__table">
      <Table>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell colSpan="5" textAlign="center">
              <h1>Scenarios</h1>
            </Table.HeaderCell>
          </Table.Row>
          <Table.Row textAlign="center">
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.HeaderCell>
              <Icon name="location arrow" />
            </Table.HeaderCell>
            <Table.HeaderCell>
              <Icon name="unlock" />
            </Table.HeaderCell>
            <Table.HeaderCell>
              <Icon name="check" />
            </Table.HeaderCell>
            <Table.HeaderCell>Name</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {renderScenarioRows(scenarios)}
        </Table.Body>

        <Table.Footer>
          {/* table controls here */}
        </Table.Footer>
      </Table>
    </div>
  );
}

export default ScenarioTable;