React: How to change Table cell background depending on cell value in React table

Question

I'm using reactstrap to build my table and im using axios to post and get my data from my backend.

I want to be able to change de background color of the cell ( ) depending on the value of the cell.

For example, if the cell value is < 0.25 background green if the cell value is less than 0 background red.

My current code looks like this:

//Input sending data and Calling API back
  state ={
  data: []
}
//this gets triggered on line 85
  search = e => {
    e.preventDefault();
    //Here we send the input that we add on line 90 value to Flask
    axios.post("/results",{search_question: document.getElementById("buscar").value})
    //Then we call it back
    .then((res) => {
      // console.log(res.data)
      //We create data variable with our returned data
      const data = res.data
      //Empty variable to pass all values from data
      const question = []
      // for loop that goes into data and pused everything to questions variable.
      for(var i in data)
        {question.push(data[i])}
      //console log to make sure our API returned the correct data and we saved in question
      console.log(question)
      //creating the state of paa and selecting the second index in question
      this.setState({paas:question[1]})

    })
     

    }

render() {

    //empty variable and set is a state
    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>

Also is this the right way fo serving tables? or should I use something different?

Answer 1

Just use a ternary operator and pass a class or value in

<td key="Questions" className={value > 0.25 ? 'greenclass' : 'redclass' }>

or

<td key="Questions" styles={{ background: value > 0.25 ? 'green' : 'red' }}>

---

Update for 3+ classes

I would use an outside function where you have an if/else or switch statement return className

Have this function outside the render

resolveClass = (value) => {
    let className = ''

    switch (true) {
        case (value > 0.25):
            className = 'green'
            break;
        case (value < 0):
            className = 'red'
            break;
        default:
            break
    }

    return className
}

Then inside the render <td key="Questions" className={resolveClass(paa.Questions)}>