How to add className in React with condition - reactjs

Question

I tried to "2. Adding a class of "error" to a row will highlight it red. Provide this
visual feedback on rows which have duplicate ranks selected." You can view my code at js_react_problem_after folder under https://github.com/HuydDo/plm_challenge. Please let me know if you have any questions. Thanks,
MainPage.jsx
import React from 'react';
import _ from 'lodash';
import FormRow from './FormRow.jsx';
import Animal from './Animal.js';
class MainPage extends React.Component {
constructor(props) {
super(props);
this.state = {
animals: ['panda','cat','capybara','iguana','muskrat'].map((name) => {
return new Animal(name);
//instantiating an object of that class. animal is a class that has
//a constructor that takes in one variable which is name and it's
//creating a bunch of objects which are instances of that class
}),
error: 'Ranks must be unique',
errorFlag: false
};
}
render() {
// console.log('this.state.animal',this.state.animals)
const errCount = {}
// this.state.animals.forEach((animal) => {
// if (animal.rank && errCount[animal.rank]){
// errCount[animal.rank] += 1
// return
// }
// errCount[animal.rank] = 1
// })
const rows = this.state.animals.map((animal) => {
// console.log(animal)
// if (animal.rank && errCount[animal.rank]){
// errCount[animal.rank] += 1
// return
// }
// errCount[animal.rank] = 1
// for (let prop in errCount){
// if(errCount[prop] >=2 && prop){
// // this.setState({
// // errorFlag : true
// // })
// }
// }
return (
<FormRow
// errorFlag={this.state.errorFlag}
animalRank={animal.rank}
selectButton={(updateRank) => {
animal.setRank(updateRank)
this.setState({animal: this.state.animals})
}}
animalName={animal.name}
key={animal.name}
/>
);
});
//create headers
const headers = _.range(1, 6).map((i) => <th key={`header-${i}`}>{i}</th>);
let disabled = false
let error = false
const count = {}
this.state.animals.forEach((animal) => {
if(!animal.rank){ //disable the button if any rank is not selected
disabled = true
}
if (animal.rank && count[animal.rank]){
count[animal.rank] += 1
return
}
count[animal.rank] = 1
})
for (let prop in count){
if(count[prop] >=2 && prop){
error = true
disabled = true
// console.log(prop + " counted " + count[prop] + " times")
}
}
// console.log('disabled:', disabled, 'error:', error)
// console.log(count)
return (
<div>
<table>
<thead>
<tr>
<th></th>
{headers}
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
<div>{error ? this.state.error : null}</div>
<input type="submit" disabled={disabled} />{/*disabled is a prop of the input tag*/}
</div>
);
}
}
export default MainPage;
FormRow.jsx
import React from 'react';
import _ from 'lodash';
/**
* TODO: 2. Adding a class of "error" to a row will highlight it red. Provide this visual feedback on rows which have duplicate ranks selected.
* TODO: 3. There is a place to display an error message near the submit button. Show this error message: `Ranks must be unique` whenever the user has selected the same rank on multiple rows.
*/
class FormRow extends React.Component {
constructor(props){
super(props)
this.state = {
rank: this.props.animalRank
}
}
//*if we receive new props and the animal props
//*doesn't match whats inside the component then
//*we should update the component
componentDidUpdate(){
if(this.props.animalRank !== this.state.rank){
this.setState({rank: this.props.animalRank})
// console.log(`rank is updated to: ${this.state.rank}`)
}
}
render() {
//created array 1-6, iterating over it,
// and for each number in that array creating
// a new array and returning this HTML chunk
const cells = _.range(1, 6).map((i) => {
return (
<td key={`${this.props.animalName}-${i}`}>
<input
onClick={() => {
// i is the number clicked on
this.props.selectButton(i)
}}
type="radio"
name={this.props.animalName}
value={i}
/>
</td>
);
});
// console.log(this.props)
const done = this.state.rank ? "done" : null
// console.log(done)
return (
<tr className={done}>
<th>{this.props.animalName}</th>
{cells}
</tr>
)
}
}
export default FormRow;

Answer 1

Here is a solution. In future questions, please try to limit code instead of wholesale copying everything with commented code included.
const trProps = {}
if(error){
trProps.className= "errorClass"
}
else if(this.state.rank){
trProps.className = "done"
}
<tr {...trProps}>
https://reactjs.org/docs/jsx-in-depth.html#spread-attributes