React question re: onClick

React question re: onClick
0

#1

This is still in it’s early stages so it’s definitely not perfect or anything, but I can’t seem to figure out why, when I click on an “element”, the other elements reverse their order?! I’m sure it’s something really obvious but I’m confused.

let React = require('react');

class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentElement: '',
      firstRow: [
        {
          name: 'Hydrogen',
          symbol: 'H',
          atomicNumber: '1',
          atomicWeight: '1.008',
          category: 'otherNonmetals'
       },
       {
         name: 'Lithium',
         symbol: 'Li',
         atomicNumber: '3',
         atomicWeight: '6.94',
         category: 'alkaliMetals'
       },
       {
         name: 'Sodium',
         symbol: 'Na',
         atomicNumber: '11',
         atomicWeight: '22.990',
         category: 'alkaliMetals'
       },
       {
         name: 'Potassium',
         symbol: 'K',
         atomicNumber: '19',
         atomicWeight: '39.098',
         category: 'alkaliMetals'
       },
       {
         name: 'Rubidium',
         symbol: 'Rb',
         atomicNumber: '37',
         atomicWeight: '85.468',
         category: 'alkaliMetals'
       },
       {
         name: 'Caesium',
         symbol: 'Cs',
         atomicNumber: '55',
         atomicWeight: '132.91',
         category: 'alkaliMetals'
       },
       {
         name: 'Francium',
         symbol: 'Fr',
         atomicNumber: '87',
         atomicWeight: '(223)',
         category: 'alkaliMetals'
       }
     ],
     secondRow: [
       {
         name: 'Beryllium',
         symbol: 'Be',
         atomicNumber: '4',
         atomicWeight: '9.0122',
         category: 'alkalineEarthMetals'
       },
       {
         name: 'Magnesium',
         symbol: 'Mg',
         atomicNumber: '12',
         atomicWeight: '24.305',
         category: 'alkalineEarthMetals'
       },
       {
         name: 'Calcium',
         symbol: 'Ca',
         atomicNumber: '20',
         atomicWeight: '40.078',
         category: 'alkalineEarthMetals'
       },
       {
         name: 'Strontium',
         symbol: 'Sr',
         atomicNumber: '38',
         atomicWeight: '87.62',
         category: 'alkalineEarthMetals'
       },
       {
         name: 'Barium',
         symbol: 'Ba',
         atomicNumber: '56',
         atomicWeight: '137.33',
         category: 'alkalineEarthMetals'
       },
       {
         name: 'Radium',
         symbol: 'Ra',
         atomicNumber: '88',
         atomicWeight: '(226)',
         category: 'alkalineEarthMetals'
       }
     ],
     thirdRow: [
       {
         name: 'Scandium',
         symbol: 'Sc',
         atomicNumber: '21',
         atomicWeight: '44.956',
         category: 'transitionMetals'
       },
       {
         name: 'Yttrium',
         symbol: 'Y',
         atomicNumber: '39',
         atomicWeight: '88.906',
         category: 'transitionMetals'
       },
       {
         symbol: '57-71',
         category: 'lanthanoids'
       }, {
         symbol: '89-103',
         category: 'actinoids'
       }
     ],
     fourthRow: [
       {
         name: 'Titanium',
         symbol: 'Ti',
         atomicNumber: '22',
         atomicWeight: '47.867',
         category: 'transitionMetals'
       },
       {
         name: 'Zirconium',
         symbol: 'Zr',
         atomicNumber: '40',
         atomicWeight: '91.224',
         category: 'transitionMetals'
       },
       {
         name: 'Hafnium',
         symbol: 'Hf',
         atomicNumber: '72',
         atomicWeight: '178.49',
         category: 'transitionMetals'
       },
       {
         name: 'Rutherfordium',
         symbol: 'Rf',
         atomicNumber: '104',
         atomicWeight: '(267)',
         category: 'transitionMetals'
       }
     ],
     fifthRow: [
       {
         name: 'Vanadium',
         symbol: 'V',
         atomicNumber: '23',
         atomicWeight: '50.942',
         category: 'transitionMetals'
       },
       {
         name: 'Niobium',
         symbol: 'Nb',
         atomicNumber: '41',
         atomicWeight: '92.906',
         category: 'transitionMetals'
       },
       {
         name: 'Tantalum',
         symbol: 'Ta',
         atomicNumber: '73',
         atomicWeight: '180.95',
         category: 'transitionMetals'
       },
       {
         name: 'Dubnium',
         symbol: 'Db',
         atomicNumber: '105',
         atomicWeight: '(268)',
         category: 'transitionMetals'
       }
     ],
     sixthRow: [
       {
         name: 'Chromium',
         symbol: 'Cr',
         atomicNumber: '24',
         atomicWeight: '51.996',
         category: 'transitionMetals'
       },
       {
         name: 'Molybdenum',
         symbol: 'Mo',
         atomicNumber: '42',
         atomicWeight: '95.95',
         category: 'transitionMetals'
       },
       {
         name: 'Tungsten',
         symbol: 'W',
         atomicNumber: '74',
         atomicWeight: '183.84',
         category: 'transitionMetals'
       }, {
         name: 'Seaborgium',
         symbol: 'Sg',
         atomicNumber: '106',
         atomicWeight: '(269)',
         category: 'transitionMetals'
       }
     ],
     seventhRow: [
       {
         name: 'Manganese',
         symbol: 'Mn',
         atomicNumber: '25',
         atomicWeight: '54.938',
         category: 'transitionMetals'
       },
       {
         name: 'Technetium',
         symbol: 'Tc',
         atomicNumber: '43',
         atomicWeight: '(98)',
         category: 'transitionMetals'
       },
       {
         name: 'Rhenium',
         symbol: 'Re',
         atomicNumber: '75',
         atomicWeight: '186.21',
         category: 'transitionMetals'
       },
       {
         name: 'Bohrium',
         symbol: 'Bh',
         atomicNumber: '107',
         atomicWeight: '(270)',
         category: 'transitionMetals'
       }
     ],
     eighthRow: [
       {
         name: 'Iron',
         symbol: 'Fe',
         atomicNumber: '26',
         atomicWeight: '55.845',
         category: 'transitionMetals'
       },
       {
         name: 'Ruthenium',
         symbol: 'Ru',
         atomicNumber: '44',
         atomicWeight: '101.07',
         category: 'transitionMetals'
       },
       {
         name: 'Osmium',
         symbol: 'Os',
         atomicNumber: '76',
         atomicWeight: '190.23',
         category: 'transitionMetals'
       },
       {
         name: 'Hassium',
         symbol: 'Hs',
         atomicNumber: '108',
         atomicWeight: '(277)',
         category: 'transitionMetals'
       }
     ],
     ninthRow: [
       {
         name: 'Cobalt',
         symbol: 'Co',
         atomicNumber: '27',
         atomicWeight: '58.933',
         category: 'transitionMetals'
       },
       {
         name: 'Rhodium',
         symbol: 'Rh',
         atomicNumber: '45',
         atomicWeight: '102.91',
         category: 'transitionMetals'
       },
       {
         name: 'Iridium',
         symbol: 'Ir',
         atomicNumber: '77',
         atomicWeight: '192.22',
         category: 'transitionMetals'
       },
       {
         name: 'Meitnerium',
         symbol: 'Mt',
         atomicNumber: '109',
         atomicWeight: '(278)',
         category: 'unknown'
       }
     ],
     tenthRow: [
       {
         name: 'Nickel',
         symbol: 'Ni',
         atomicNumber: '28',
         atomicWeight: '58.693',
         category: 'transitionMetals'
       },
       {
         name: 'Palladium',
         symbol: 'Pd',
         atomicNumber: '46',
         atomicWeight: '106.42',
         category: 'transitionMetals'
       },
       {
         name: 'Platinum',
         symbol: 'Pt',
         atomicNumber: '78',
         atomicWeight: '195.08',
         category: 'transitionMetals'
       },
       {
         name: 'Darmstadtium',
         symbol: 'Ds',
         atomicNumber: '110',
         atomicWeight: '(281)',
         category: 'unknown'
       }
     ],
     eleventhRow: [
       {
         name: 'Copper',
         symbol: 'Cu',
         atomicNumber: '29',
         atomicWeight: '63.546',
         category: 'transitionMetals'
       },
       {
         name: 'Silver',
         symbol: 'Ag',
         atomicNumber: '47',
         atomicWeight: '107.87',
         category: 'transitionMetals'
       },
       {
         name: 'Gold',
         symbol: 'Au',
         atomicNumber: '79',
         atomicWeight: '196.97',
         category: 'transitionMetals'
       },
       {
         name: 'Roentgenium',
         symbol: 'Rg',
         atomicNumber: '111',
         atomicWeight: '(282)',
         category: 'unknown'
       }
     ],
     twelfthRow: [
       {
         name: 'Zinc',
         symbol: 'Zn',
         atomicNumber: '30',
         atomicWeight: '65.38',
         category: 'transitionMetals'
       },
       {
         name: 'Cadmium',
         symbol: 'Cd',
         atomicNumber: '48',
         atomicWeight: '112.41',
         category: 'transitionMetals'
       },
       {
         name: 'Mercury',
         symbol: 'Hg',
         atomicNumber: '80',
         atomicWeight: '200.59',
         category: 'transitionMetals'
       },
       {
         name: 'Copernicium',
         symbol: 'Cn',
         atomicNumber: '112',
         atomicWeight: '(285)',
         category: 'transitionMetals'
       }
     ],
     thirteenthRow: [
       {
         name: 'Boron',
         symbol: 'B',
         atomicNumber: '5',
         atomicWeight: '10.81',
         category: 'metalloids'
       },
       {
         name: 'Aluminium',
         symbol: 'Al',
         atomicNumber: '13',
         atomicWeight: '26.982',
         category: 'postTransitionMetals'
       },
       {
         name: 'Gallium',
         symbol: 'Ga',
         atomicNumber: '31',
         atomicWeight: '69.723',
         category: 'postTransitionMetals'
       },
       {
         name: 'Indium',
         symbol: 'In',
         atomicNumber: '49',
         atomicWeight: '114.82',
         category: 'postTransitionMetals'
       },
       {
         name: 'Thallium',
         symbol: 'Tl',
         atomicNumber: '81',
         atomicWeight: '204.38',
         category: 'postTransitionMetals'
       },
       {
         name: 'Nihonium',
         symbol: 'Nh',
         atomicNumber: '113',
         atomicWeight: '(286)',
         category: 'unknown'
       }
     ],
     fourteenthRow: [
       {
         name: 'Carbon',
         symbol: 'C',
         atomicNumber: '6',
         atomicWeight: '12.011',
         category: 'otherNonmetals'
       },
       {
         name: 'Silicon',
         symbol: 'Si',
         atomicNumber: '14',
         atomicWeight: '28.085',
         category: 'metalloids'
       },
       {
         name: 'Germanium',
         symbol: 'Ge',
         atomicNumber: '32',
         atomicWeight: '72.630',
         category: 'metalloids'
       },
       {
         name: 'Tin',
         symbol: 'Sn',
         atomicNumber: '50',
         atomicWeight: '118.71',
         category: 'postTransitionMetals'
       },
       {
         name: 'Lead',
         symbol: 'Pb',
         atomicNumber: '82',
         atomicWeight: '207.2',
         category: 'postTransitionMetals'
       },
       {
         name: 'Flerovium',
         symbol: 'Fl',
         atomicNumber: '114',
         atomicWeight: '(289)',
         category: 'postTransitionMetals'
       }
     ],
     fifteenthRow: [
       {
         name: 'Nitrogen',
         symbol: 'N',
         atomicNumber: '7',
         atomicWeight: '14.007',
         category: 'otherNonmetals'
       },
       {
         name: 'Phosphorus',
         symbol: 'P',
         atomicNumber: '15',
         atomicWeight: '30.974',
         category: 'otherNonmetals'
       },
       {
         name: 'Arsenic',
         symbol: 'As',
         atomicNumber: '33',
         atomicWeight: '74.922',
         category: 'metalloids'
       },
       {
         name: 'Antimony',
         symbol: 'Sb',
         atomicNumber: '51',
         atomicWeight: '121.76',
         category: 'metalloids'
       },
       {
         name: 'Bismuth',
         symbol: 'Bi',
         atomicNumber: '83',
         atomicWeight: '208.98',
         category: 'postTransitionMetals'
       },
       {
         name: 'Moscovium',
         symbol: 'Mc',
         atomicNumber: '115',
         atomicWeight: '(290)',
         category: 'unknown'
       }
     ],
     sixteenthRow: [
       {
         name: 'Oxygen',
         symbol: 'O',
         atomicNumber: '8',
         atomicWeight: '15.999',
         category: 'otherNonmetals'
       },
       {
         name: 'Sulfur',
         symbol: 'S',
         atomicNumber: '16',
         atomicWeight: '32.06',
         category: 'otherNonmetals'
       },
       {
         name: 'Selenium',
         symbol: 'Se',
         atomicNumber: '34',
         atomicWeight: '78.971',
         category: 'otherNonmetals'
       },
       {
         name: 'Tellurium',
         symbol: 'Te',
         atomicNumber: '52',
         atomicWeight: '127.60',
         category: 'metalloids'
       },
       {
         name: 'Polonium',
         symbol: 'Po',
         atomicNumber: '84',
         atomicWeight: '(209)',
         category: 'postTransitionMetals'
       },
       {
         name: 'Livermorium',
         symbol: 'Lv',
         atomicNumber: '116',
         atomicWeight: '(293)',
         category: 'unknown'
       }
     ],
     seventeenthRow: [
       {
         name: 'Fluorine',
         symbol: 'F',
         atomicNumber: '9',
         atomicWeight: '18.998',
         category: 'otherNonmetals'
       },
       {
         name: 'Chlorine',
         symbol: 'Cl',
         atomicNumber: '17',
         atomicWeight: '35.45',
         category: 'otherNonmetals'
       },
       {
         name: 'Bromine',
         symbol: 'Br',
         atomicNumber: '35',
         atomicWeight: '79.904',
         category: 'otherNonmetals'
       },
       {
         name: 'Iodine',
         symbol: 'I',
         atomicNumber: '53',
         atomicWeight: '126.90',
         category: 'otherNonmetals'
       },
       {
         name: 'Astatine',
         symbol: 'At',
         atomicNumber: '85',
         atomicWeight: '(210)',
         category: 'metalloids'
       },
       {
         name: 'Tennessine',
         symbol: 'Ts',
         atomicNumber: '117',
         atomicWeight: '(294)',
         category: 'unknown'
       }
     ],
     eighteenthRow: [
       {
         name: 'Helium',
         symbol: 'He',
         atomicNumber: '2',
         atomicWeight: '4.0026',
         category: 'nobleGases'
       },
       {
         name: 'Neon',
         symbol: 'Ne',
         atomicNumber: '10',
         atomicWeight: '20.180',
         category: 'nobleGases'
       },
       {
         name: 'Argon',
         symbol: 'Ar',
         atomicNumber: '18',
         atomicWeight: '39.948',
         category: 'nobleGases'
       },
       {
         name: 'Krypton',
         symbol: 'Kr',
         atomicNumber: '36',
         atomicWeight: '83.798',
         category: 'nobleGases'
       },
       {
         name: 'Xenon',
         symbol: 'Xe',
         atomicNumber: '54',
         atomicWeight: '131.29',
         category: 'nobleGases'
       },
       {
         name: 'Radon',
         symbol: 'Rn',
         atomicNumber: '86',
         atomicWeight: '(222)',
         category: 'nobleGases'
       },
       {
         name: 'Oganesson',
         symbol: 'Og',
         atomicNumber: '118',
         atomicWeight: '(294)',
         category: 'unknown'
       }
     ],
     nineteenthRow: [
       {
         name: 'Lanthanum',
         symbol: 'La',
         atomicNumber: '57',
         atomicWeight: '138.91',
         category: 'lanthanoids'
       },
       {
         name: 'Cerium',
         symbol: 'Ce',
         atomicNumber: '58',
         atomicWeight: '140.12',
         category: 'lanthanoids'
       },
       {
         name: 'Praseodymium',
         symbol: 'Pr',
         atomicNumber: '59',
         atomicWeight: '140.91',
         category: 'lanthanoids'
       },
       {
         name: 'Neodymium',
         symbol: 'Nd',
         atomicNumber: '60',
         atomicWeight: '144.24',
         category: 'lanthanoids'
       },
       {
         name: 'Promethium',
         symbol: 'Pm',
         atomicNumber: '61',
         atomicWeight: '(145)',
         category: 'lanthanoids'
       },
       {
         name: 'Samarium',
         symbol: 'Sm',
         atomicNumber: '62',
         atomicWeight: '150.36',
         category: 'lanthanoids'
       },
       {
         name: 'Europium',
         symbol: 'Eu',
         atomicNumber: '63',
         atomicWeight: '151.96',
         category: 'lanthanoids'
       },
       {
         name: 'Gadolinium',
         symbol: 'Gd',
         atomicNumber: '64',
         atomicWeight: '157.25',
         category: 'lanthanoids'
       },
       {
         name: 'Terbium',
         symbol: 'Tb',
         atomicNumber: '65',
         atomicWeight: '158.93',
         category: 'lanthanoids'
       },
       {
         name: 'Dysprosium',
         symbol: 'Dy',
         atomicNumber: '66',
         atomicWeight: '162.50',
         category: 'lanthanoids'
       },
       {
         name: 'Holmium',
         symbol: 'Ho',
         atomicNumber: '67',
         atomicWeight: '164.93',
         category: 'lanthanoids'
       },
       {
         name: 'Erbium',
         symbol: 'Er',
         atomicNumber: '68',
         atomicWeight: '167.26',
         category: 'lanthanoids'
       },
       {
         name: 'Thulium',
         symbol: 'Tm',
         atomicNumber: '69',
         atomicWeight: '168.93',
         category: 'lanthanoids'
       },
       {
         name: 'Ytterbium',
         symbol: 'Yb',
         atomicNumber: '70',
         atomicWeight: '173.05',
         category: 'lanthanoids'
       },
       {
         name: 'Lutetium',
         symbol: 'Lu',
         atomicNumber: '71',
         atomicWeight: '174.97',
         category: 'lanthanoids'
       }
     ],
     twentiethRow: [
       {
         name: 'Actinium',
         symbol: 'Ac',
         atomicNumber: '89',
         atomicWeight: '(227)',
         category: 'actinoids'
       },
       {
         name: 'Thorium',
         symbol: 'Th',
         atomicNumber: '90',
         atomicWeight: '232.04',
         category: 'actinoids'
       },
       {
         name: 'Protactinium',
         symbol: 'Pa',
         atomicNumber: '91',
         atomicWeight: '231.04',
         category: 'actinoids'
       },
       {
         name: 'Uranium',
         symbol: 'U',
         atomicNumber: '92',
         atomicWeight: '238.03',
         category: 'actinoids'
       },
       {
         name: 'Neptunium',
         symbol: 'Np',
         atomicNumber: '93',
         atomicWeight: '(237)',
         category: 'actinoids'
       },
       {
         name: 'Plutonium',
         symbol: 'Pu',
         atomicNumber: '94',
         atomicWeight: '(244)',
         category: 'actinoids'
       },
       {
         name: 'Americium',
         symbol: 'Am',
         atomicNumber: '95',
         atomicWeight: '(243)',
         category: 'actinoids'
       },
       {
         name: 'Curium',
         symbol: 'Cm',
         atomicNumber: '96',
         atomicWeight: '(247)',
         category: 'actinoids'
       },
       {
         name: 'Berkelium',
         symbol: 'Bk',
         atomicNumber: '97',
         atomicWeight: '(247)',
         category: 'actinoids'
       },
       {
         name: 'Californium',
         symbol: 'Cf',
         atomicNumber: '98',
         atomicWeight: '(251)',
         category: 'actinoids'
       },
       {
         name: 'Einsteinium',
         symbol:  'Es',
         atomicNumber: '99',
         atomicWeight: '(252)',
         category: 'actinoids'
       },
       {
         name: 'Fermium',
         symbol: 'Fm',
         atomicNumber: '100',
         atomicWeight: '(257)',
         category: 'actinoids'
       },
       {
         name: 'Mendelevium',
         symbol: 'Md',
         atomicNumber: '101',
         atomicWeight: '(258)',
         category: 'actinoids'
       },
       {
         name: 'Nobelium',
         symbol: 'No',
         atomicNumber: '102',
         atomicWeight: '(259)',
         category: 'actinoids'
       },
       {
         name: 'Lawrencium',
         symbol: 'Lr',
         atomicNumber: '103',
         atomicWeight: '(266)',
         category: 'actinoids'
       }
     ]
    }
  }

  handleChange(element) {
    console.log(this.state.currentElement);
    this.setState ({
      currentElement: {
        name: element.name,
        symbol: element.symbol,
        atomicNumber: element.atomicNumber,
        atomicWeight: element.atomicWeight
      }
    })
  }


  render() {
    return (
      <div>
      <h2>{this.state.currentElement.name}</h2>
      <div className="container">
        <div id="firstRow">
          {this.state.firstRow.map(element => <div onClick={this.handleChange.bind(this, element)} className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="secondRow" className="reverse">
          {this.state.secondRow.reverse().map(element => <div onClick={this.handleChange.bind(this, element)} className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="thirdRow" className="reverse">
          {this.state.thirdRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="fourthRow" className="reverse">
          {this.state.fourthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="fifthRow" className="reverse">
          {this.state.fifthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="sixthRow" className="reverse">
          {this.state.sixthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="seventhRow" className="reverse">
          {this.state.seventhRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="eighthRow" className="reverse">
          {this.state.eighthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="ninthRow" className="reverse">
          {this.state.ninthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="tenthRow" className="reverse">
          {this.state.tenthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="eleventhRow" className="reverse">
          {this.state.eleventhRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="twelfthRow" className="reverse">
          {this.state.twelfthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="thirteenthRow" className="reverse">
          {this.state.thirteenthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="fourteenthRow" className="reverse">
          {this.state.fourteenthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="fifteenthRow" className="reverse">
          {this.state.fifteenthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="sixteenthRow" className="reverse">
          {this.state.sixteenthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="seventeenthRow" className="reverse">
          {this.state.seventeenthRow.reverse().map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="eighteenthRow">
          {this.state.eighteenthRow.map(element => <div className={element.category + ' blocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
      </div>
        <div id="bottomOne">
          {this.state.nineteenthRow.map(element => <div className={element.category + ' blocks bottomBlocks'} key={element.symbol}>{element.symbol}</div>)}
        </div>
        <div id="bottomTwo">
          {this.state.twentiethRow.map(element => <div className={element.category + ' blocks bottomBlocks'} key={element.symbol}>{element.symbol}</div>)}
      </div>
      </div>
    )
  }
}

module.exports = Layout;


#2

Never mind. I realized the issue is that each time an element was clicked, it reversed the previous order, thus causing the issue. Oops.