Как я могу назначить другой цвет фона конкретному элементу c в списке в зависимости от условия, если он делится на 3?

Question

Как я могу изменить цвет фона элемента в списке в React в зависимости от его значения. Я хочу, чтобы он был красным, если он делится на 3.

Answer 1

вы можете проверить этот пример:

import React from "react";

export default function NumberList({numbers}) {

    let color = '';
    const listItems = numbers.map((n) => {
        color = (n % 3 === 0)? 'skyblue' : 'lightgreen';
        return  <li style={{backgroundColor:`${color}`}} key={n}>{n}</li>;
    });

    return (
        <div>
            <ul>
                {listItems}
            </ul>
        </div>
    );
}

App. js

import React, {useEffect, useState} from 'react';
import NumberList from "./LIColor";

class App extends React.Component {

    render() {
        let numbers = [];
        for (let i = 0; i < 10; i++)
            numbers.push(i);

        return (
            <NumberList numbers={numbers}/>
        )
    }
}

export default App;

Answer 2

вы должны добавить класс Red, только когда значение делится на 3, вы можете сделать это

<li key={n.toString()} className={n % 3 === 0 ? 'Red' : ''}>{n}</li>