मुझे पहले ही पता चल गया है कि तालिका को सॉर्ट करने के लिए आपको सॉर्ट फ़ंक्शन का उपयोग करने की आवश्यकता है। मैं जो करने की कोशिश कर रहा हूं वह कुंजी द्वारा क्रमबद्ध है ताकि मुझे फ़ंक्शन को कुंजी द्वारा सॉर्ट करने के लिए कोड दोहराना न पड़े। मैं अपना कोड सूखा रखना चाहता हूं। मैं ऐसा कैसे कर पाऊंगा। भी

कोड

  const sortTable = (key) => {
    const clonedOptions = [...listOfOptions];
    clonedOptions.sort((a, b) => {
      return a.key - b.key;
    });
    console.log(clonedOptions, key);
    setListOfOptions(clonedOptions);
  };

    <div className="outputs">
      <table>
        <thead>
          <tr>
            <th></th>
            <th onClick={() => sortTable()}>Date</th>
            <th onClick={sortTable}>Stock Name</th>
            <th onClick={sortTable}>Price Of Option</th>
            <th onClick={sortTable}>Number Of Options</th>
            <th onClick={sortTable}>Total Amount Spent</th>
            <th onClick={sortTable}>Option Sold At</th>
            <th onClick={sortTable}>Amount Of Options Sold</th>
            <th onClick={sortTable}>Proft</th>
          </tr>
        </thead>
        {listOfOptions.map((option) => {
          return (
            <tbody key={uuidv1()}>
              <tr>
                <td title="delete" onClick={() => deleteOption(option.id)}>
                  <span className="delete">x</span>
                </td>
                <td>{option.clock}</td>
                <td>{option.name.toUpperCase()}</td>
                <td>${option.price}</td>
                <td>{option.amountOfOptions}</td>
                <td>${option.totalAmountSpent.toFixed(2)}</td>
                <td>${option.optionPriceSoldAt}</td>
                <td>{option.amountOfOptionsSold}</td>
                <td
                  style={{ color: option.totalProfit >= 0 ? "green" : "red" }}
                >
                  {option.totalProfit.toFixed(2)}
                </td>
              </tr>
            </tbody>
          );
        })}
      </table>
    </div>
0
Alanaj 8 अक्टूबर 2020, 03:58

1 उत्तर

सबसे बढ़िया उत्तर

इसके लिए आपके कोड को केवल कुछ बदलावों की आवश्यकता है: सॉर्ट फ़ंक्शन में कुंजी परम के मान का उपयोग करें और प्रत्येक ऑनक्लिक में कुंजी पास करें

  const sortTable = (key) => {
    const clonedOptions = [...listOfOptions];
    clonedOptions.sort((a, b) => {
      return a[key] - b[key];
    });
    console.log(clonedOptions, key);
    setListOfOptions(clonedOptions);
  };

    <tr>
      <th></th>
      <th onClick={() => sortTable('date')}>Date</th>
      <th onClick={() => sortTable('name')}>Stock Name</th>
      <th onClick={() => sortTable('price')}>Price Of Option</th>
      <th onClick={() => sortTable('amountOfOptions')}>Number Of Options</th>
      <th onClick={() => sortTable('totalAmountSpent')}>Total Amount Spent</th>
      <th onClick={() => sortTable('optionPriceSoldAt')}>Option Sold At</th>
      <th onClick={() => sortTable('amountOfOptionsSold')}>Amount Of Options Sold</th>
      <th onClick={() => sortTable('totalProfit')}>Proft</th>
    </tr>

2
diedu 8 अक्टूबर 2020, 04:19