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;