Не могу переписать backgroundcolor с "нулем"

Question

В моем приложении реакции цвет фона для некоторых дочерних элементов задан через реквизит из состояния.Начальное значение для всех цветов равно нулю, поэтому элементы просто прозрачны.После некоторого взаимодействия и щелчка пользователь может изменить значения состояния на другие цвета, чтобы фон изменился.

После этого я хочу иметь возможность установить все цвета обратно на ноль, но почему-то это не работает, вот небольшая часть моего кода:

 state = { colors: [
              { id: 1, color: null },
              { id: 2, color: null },
              { id: 3, color: null },
              { id: 4, color: null }
                 ]}
 reset = () => {
                let colors = [...this.state.colors]
                colors.forEach(color => color.color = null)
                this.setState({ colors: colors })
                }                        

ЗначенияЦветовые клавиши в состоянии изменяются на ноль, как и ожидалось, но цвета элементов не исчезают.Если я пытаюсь сделать что-то вроде

 colors.forEach(color => color.color = "red")

, тогда все цвета на самом деле меняются на красный, но почему я не могу получить тот же результат с нулем?

Answer 1

Использование transparent вместо null работает.Вот демо

class Colors extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = { colors: props.colors };
    this.reset = this.reset.bind(this);
  }
  
  reset() {
    const colors = this.state.colors.map(({ id }) => {
      return { id, color: 'transparent' }
    });
    this.setState({ colors });
  }  
 
 render() {
    const colors = this.state.colors;
    return (
      <div>
      {colors.map(({id, color}, i) => {
        return <div key={i} style={{backgroundColor: color}}>{i}</div>
      })}        
      <button onClick={this.reset}>Reset</button>
      </div>
    );
  }
}

const colors = [
  { id: 1, color: 'red' },
  { id: 2, color: 'blue' },
  { id: 3, color: 'green' }
];

ReactDOM.render(
  <Colors colors={colors} />,
  document.getElementById('container')
);

div {
  height: 20px;
  width: 20px;
  color: black;
  margin-bottom: 2px;
}

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