I am currently utilizing reactstrap to design my table and employing axios to interact with my backend data.
The objective is to dynamically change the background color of a cell based on its value. For instance, if the cell value is less than 0.25, it should be green; otherwise, if the value is less than 0, it should be red.
This snippet showcases my existing code structure:
//Input sending data and Calling API back
state = {
data: []
}
//this gets triggered on line 85
search = e => {
e.preventDefault();
axios.post("/results",{search_question: document.getElementById("buscar").value})
.then((res) => {
const data = res.data
const question = []
for(var i in data)
{question.push(data[i])}
console.log(question)
this.setState({paas:question[1]})
})
}
render() {
const{paas = []} = this.state
return (
<Table>
<thead>
<tr>
<th>Question</th>
<th>Sentiment</th>
<th>Magnitud</th>
</tr>
</thead;
<tbody>
{paas.length ? paas.map(paa => (
<tr>
<td key="Questions" style= {{}}>{paa.Questions}</td>
<td key="Sentiment">{paa.Sentiment}</td>
<td key="Magnitud"> {paa.Magnitud}</td>
</tr>
))
:
(<p> </p>)
}
</tbody>
</Table>) }
</Container>
</div>
Do you think this approach is suitable for displaying tables, or do you recommend an alternative method?