I want to change the background of the elements in a list from dark to light.

The number of items in the list is variable. It could be 5, it could be 50.

I can set the default color of the first item.

for example; for example

https://jsfiddle.net/tL25ngrq/1/

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  
  render() {
  const min = 1;
  const max = 255;
  const rand = min   Math.random() * (max - min);
  const minColor = 1;
  const maxColor = 255;
  const randColor = minColor   Math.random() * (maxColor - minColor);
  console.log(randColor)
  let rows = [];
  for (let i = 0; i < rand; i  ) {
  rows.push(<tr style={{ backgroundColor: `rgb(10, ${randColor * i}, 100)` }} ><td>Test {i}</td></tr>)}
    return (
      <div>
       <table>
        <tr>
         <th>Title</th>
       </tr>
        {rows}
     </table>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

CodePudding user response：

Actually I'd suggest you to use hsv instead of rgb. In hsv, v is represent value, and the lower it is, the darker color will be.

So for example you can take range from 20% (0% is fully black) to 100% and make some calculation over it. You can just divide 80 on number of rows, then for each row set V to rowNumber * (80 / numberOfRows), I'm not sure how it work with decimal numbers, so you might use Math.floor or something like that to get an integer value.

Hope it helps

CodePudding user response：

Here is an over simplified example, it generates a random color on each run, and combine it with a generated lightness to create a color value based on the index i of the list.

The length of the list is randomly generated, same as the posted code.

This example runs in the snippet below for convenience, and displays randomized results by running and hiding the snippet.

Hope it will help.

    class TodoApp extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
        }
      }
      
      render() {
      const min = 1;
      const max = 30;
      const rand = min   Math.random() * (max - min);
      const minColor = 0;
      const maxColor = 360;
      const randColor = minColor   Math.floor(Math.random() * (maxColor - minColor));
      console.log(randColor)
      let rows = [];
      for (let i = 0; i < rand; i  ) {
      const randLit = (100 - (((i 1)/rand) * 100)).toFixed(2)   '%';
      const backgroundColor = `hsl(${randColor} 100% ${randLit})`;
      rows.push(<tr style={{ backgroundColor }} ><td>Test {i}</td></tr>)}
        return (
          <div>
           <table>
            <tr>
             <th>Title</th>
           </tr>
            {rows}
         </table>
          </div>
        )
      }
    }

    ReactDOM.render(<TodoApp />, document.querySelector('#root'));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>