I want to display message when button is clicked one and show an alert when button is clicked twice

Question

I have used a button to sort table and display message, but i want to display message according to button click.if clicked once display button clicked once else button clicked twice.

THIS IS MY CSS for displaying:

  # app {
      font - family: 'Open Sans', sans - serif;.table {
          margin: 1e m;
          display: flex;
          flex - direction: column;
      }.header, .row {
          display: flex;
          div {
              flex: 1;
              padding: 0.2 rem 0.4e m;
              border: 1 px solid rgb(238, 238, 238);
          }
      }.header {
          background - color: rgb(238, 238, 238);
          div {
              cursor: pointer;
          }
      }
  }.search - results {
      color: red;
  }

here is my reactjs code:

const Row = ({ id, title, priority, type, complete }) => (
              <div className="row">
                {" "}
                <div> {id} </div> <div> {title} </div> <div> {priority} </div>{" "}
                <div> {type} </div> <div> {complete} </div>{" "}
              </div>
            );
            class Table extends React.Component {
              constructor(props) {
                super(props);
                this.state = {
                  data: [
                    {
                      id: 403,
                      title: "Task 403",
                      priority: "High",
                      type: "Improvement",
                      complete: 100
                    },
                    {
                      id: 532,
                      title: "Task 532",
                      priority: "Medium",
                      type: "Improvement",
                      complete: 30
                    },
                    {
                      id: 240,
                      title: "Task 240",
                      priority: "High",
                      type: "Story",
                      complete: 66
                    }
                  ]
                };
                this.compareBy.bind(this);
                this.sortBy.bind(this);
              }
              compareBy(key) {
                return function(a, b) {
                  if (a[key] < b[key]) return -1;
                  if (a[key] > b[key]) return 1;
                  return 0;
                };
              }
              sortBy(key) {
                let arrayCopy = [...this.state.data];
                arrayCopy.sort(this.compareBy(key));
                this.setState({
                  data: arrayCopy
                });
                this.state.showres = [false];
              }
              render() {
                const rows = this.state.data.map(rowData => <Row {...rowData} />);
                return (
                  <div className="table">
                    {" "}
                    <div className="header">
                      {" "}
                      <div> ID </div> <div> Title </div> <div> Priority </div>{" "}
                      <div> Issue Type </div> <div> % Complete </div>{" "}
                    </div>{" "}
                    <div className="body"> {rows} </div> <br />{" "}
                    <div>
                      {" "}
                      <input
                        type="submit"
                        value="Sort"
                        onClick={() => this.sortBy("complete")}
                       onDoubleClick={() =>this.sortBy('id')} />{" "}
                       {this.state.showres ? <Results /> : null}{" "}
                    </div>{" "}
                  </div>
                );
              }
            }
            var Results = React.createClass({
              render: function() {
                return (
                if(props.onClick)
                  <div id="results" className="search-results">
                    {" "}
                    <br /> button has been clicked once{" "}
                 else{
               alert("button clicked twice");
                  </div>
                );
              }
            });


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

this is my html page:

 <div id="app"></div>

These two buttons are sorting data but displays same message!!!!!!!!!!Anyone having knowledge of reactjs can help me.

Answer 1

As you are modifying your question I would Assume that you want to achieve:

1. Each click of the button toggles the sorting behaviour
2. You want to sort on every column
3. After all sorting options next click on button should turn off the sorting

const columns = ['id', 'title', 'priority', 'type', 'complete']

const Row = ({data}) => (
    <div className="row">
        {columns
           .map(columnName =>
             <div key={data.id + columnName}>{data[columnName]}</div>)
        }
    </div>
  );

  const data = [
    {
      id: 403,
      title: 'Task 403',
      priority: 'High',
      type: 'Improvement',
      complete: 100,
    },
    {
      id: 532,
      title: 'Task 532',
      priority: 'Medium',
      type: 'Improvement',
      complete: 30,
    },
    {
      id: 240,
      title: 'Task 240',
      priority: 'High',
      type: 'Story',
      complete: 66,
    },
  ];

  const sortKeys = [null, ...columns];
  const compareBy = key => (a, b) => {
    if (!key) return 0;
    if (a[key] < b[key]) return -1;
    if (a[key] > b[key]) return 1;
    return 0;
  };

  const Results = ({ sortKeyIndex }) => (sortKeyIndex ? <span>Sorted by {sortKeys[sortKeyIndex]}</span> : <span>Original order</span>);

  class Table extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        tableData: props.data,
        sortKeyIndex: 0,
      };
      this.sortBy.bind(this);
    }

    sortBy() {
      const arrayCopy = [...this.props.data];
      const sortKeyIndex = (this.state.sortKeyIndex + 1) % sortKeys.length;
      arrayCopy.sort(compareBy(sortKeys[sortKeyIndex]));
      this.setState(() => ({
        tableData: arrayCopy,
        sortKeyIndex,
      }));
    }


    render() {
      const { tableData, sortKeyIndex } = this.state;
      return (
        <div className="table">
          <div className="header">
            <div> ID </div>
            <div> Title </div>
            <div> Priority </div>
            <div> Issue Type </div>
            <div> % Complete </div>
          </div>
          <div className="body">
            {tableData.map(rowData => <Row key={rowData.id} data={rowData} />)}
          </div>
          <br />
          <div>
            <input
              type="submit"
              value="Sort"
              onClick={() => this.sortBy()}
            />
          </div>
            <Results sortKeyIndex={sortKeyIndex} />
        </div>
      );
    }
  }

  ReactDOM.render(<Table data={data} />, document.getElementById('myApp'));