I am currently working on a React component called Table
, which displays a table based on the elements in an array prop. One specific requirement I have is that when a user clicks on a button, the column with the id foo
should change its background color to yellow.
class Table extends React.Component {
render() {
return (
<table>
<thead>
<tr><th>Heading 1</th></tr>
</thead>
<tbody>
{this.props.array.map(element =>
<tr key={element}>
<td id="foo">{element}</td>
</tr>
)}
</tbody>
</table>
);
}
}
Currently, my approach involves using another React component:
class Bar extends React.Component {
row;
componentDidMount() {
this.row = document.getElementById("foo");
}
render() {
return {
<button onClick={(event) => {
this.update();
}}>I will turn the #foo column yellow!
</button>
}
}
update() {
this.row.classList.add('yellow-color');
}
}
CSS:
.yellow-color {
background-color: yellow;
}
However, it seems that my current implementation does not achieve the desired effect. Can anyone provide guidance on why this may be happening and how to address this issue effectively? Your insights would be greatly appreciated!