I'm experiencing a specific issue with the component below related to the changeColor() function, which is triggering an error message:
TypeError: Cannot set property 'color' of undefined
This error seems to be isolated within this component. Other functionalities are working perfectly fine. The JSON data is being fetched successfully, and the rendering process of the component was also smooth prior to the implementation of the changeColor() function.
import React, { Component } from 'react'
var data = require('./db.json');
class Cronology extends Component {
constructor(props) {
super(props)
this.state = {
cronology: [],
year: "",
description: ""
}
this.changeColor = this.changeColor.bind(this)
}
componentDidUpdate() {
this.setState({
cronology: data.cronology
})
this.changeColor();
}
changeColor() {
document.querySelectorAll('p').style.color = 'red'
}
render() {
return (
<table>
{
this.state.cronology && this.state.cronology.map(
(i) => {
return (
<tr>
<th className="column1">• {i.year}</th>
<th className="column2"><p>{i.description}</p></th>
</tr>
)
}
)
}
</table>
)
}
}
export default Cronology;