Display the status of each test while running

Question

I have a list component. this component receives data from a dataset. When, for each test a callback function is run, the state (testStatus) is updated. The console.log(testStatus) logs the following

But I am drawing a blank on how to access them and update the UI accordingly. Any help is really appreciated!

I would like to display the different statuses in the UI. So when running display 'test is running' When fail display 'Test failed'. When passed display 'Test Succeeded'. When all tests are done running, display 'All tests are done running'

             {!clicked && (
                    <span style={{ background: "grey" }}>
                      Test did not run yet
                    </span>
                  )}

This is the list component where the data set is imported and where the callback is invoked.

import React from "react";
import "./App.css";
import tests from "../constants/tests/tests";

class TestsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicked: false,
      testStatus: {},
      tests: tests
    };
    this.handleClick = this.handleClick.bind(this);
  }

  uniqueId() {
    tests.map((test, index) => {
      let uniqId = parseInt(index);
      return Object.assign(test, { id: uniqId });
    });
  }

  handleClick(event) {
    event.preventDefault();
    this.uniqueId();
    this.setState({ clicked: true });
    tests.map(test => {
      test.run(x =>
        this.setState({
          testStatus: {
            ...this.state.testStatus,
            [test.id]: x ? "passed" : "failed"
          }
        })
      );
    });
  }

  render() {
    const { clicked, testStatus, tests } = this.state;
    console.log(testStatus);
    return (
      <div>
        <div className="testsList">
          {tests.map((test, index) => {
            return (
              <div key={test.description}>
                <div style={{ display: "flex", flexDirection: "column" }}>
                  <p>{test.description}</p>

                  {!clicked && (
                    <span style={{ background: "grey" }}>
                      Test did not run yet
                    </span>
                  )}

                  {/* if the index is equal to the test.id */}
                  {/* {this.state.testStatus} */}
                  {/* {<span>{Object.values(testStatus)}</span>} */}

                </div>
              </div>
            );
          })}
        </div>
        <button className="testRunner" onClick={this.handleClick}>
          Run these tests
        </button>
      </div>
    );
  }
}

export default TestsList;

I think I have to do something with lifecycle hooks. My knowledge on React is a bit old and rusty.

So please do educate me.

Answer 1

Actually, the constructor method that you are using is currently way too old. Just like Madona singing Christmas songs. So, in order to update your component in a better way, I would recommend you to read about React Hooks or Stateful Components and Lifecycle Methods .

Nevertheless, you could use useState && useEffect to update this component or ComponentWillUpdate || PureComponent || React.Memo ComponentWillUpdate || PureComponent || React.Memo ComponentWillUpdate || PureComponent || React.Memo . Give it a google and you will find Magic there.

Bonus: Please, use destructure and assignment in order to extract { Component } and there is no need to use the .bind anymore.

These tips might help you code like a pro!