I have some data in a JavaScript object from a JSON file, where certain entries have a spanid (number) while others do not. I've written React code to highlight buttons with a spanid on hover, but I'm looking for a way to highlight or change the background color of all buttons with the same spanid when one is hovered. Buttons without a spanid should not be highlighted. Any suggestions on how to achieve this?
App.css
.example_c {
color: #494949 !important;
text-transform: uppercase;
text-decoration: none;
background: #ffffff;
padding: 10px;
border: 2px solid #494949 !important;
display: inline-block;
transition: all 0.4s ease 0s;
margin-left:10px;
margin-top:10px;
width:120px;
}
.example_c:hover {
background: #556bce;
color: white !important;
}
.example_d {
color: #494949 !important;
text-transform: uppercase;
text-decoration: none;
background: #ffffff;
padding: 10px;
border: 2px solid #494949 !important;
display: inline-block;
transition: all 0.4s ease 0s;
margin-left:10px;
margin-top:10px;
width:120px;
}App.js
import React from 'react';
import './App.css';
import Records from "./records.json";
class Relation extends React.Component {
render () {
const tokens_to_render = [];
const input_tokens = Records;
var cntr = 0;
input_tokens.forEach(tk => {
const span = tk['spanid'];
if (!tk['spanid']) {
tokens_to_render.push(
<button key={cntr} index={tk['spanid']} className='example_d'>
{tk['token_text']}
</button>
)
cntr = cntr + 1;
} else {
tokens_to_render.push(
<button key={cntr} index={tk['spanid']} className='example_c' >
{tk['token_text']}
</button>
)
cntr = cntr + 1;
}
});
return (
<div className="control-box">
{tokens_to_render}
</div>
)
}
}
export default Relation;