DOM не обновляется, хотя функция изменяется var

Question

Несмотря на то, что значение переменной меняется на значение, из-за которого элемент не отображается, страница не обновляется, а элемент остается отображенным.

Попытка перемещения внутри компонента, не работает.

function clickHandler(item)
    {
    object[item].active = 0;
    }

let object = [{data: 
              <p onClick={() => clickHandler(0)}> Data </p>, 
              active:1},
              {data:
              <p onClick={() => clickHandler(1)}> Data2 </p>, 
              active:1}
             ];                                             


class Objects extends React.Component {
    constructor(props) {
        super(props);
    }


render() {
   return (
    <div class="notifications">
    {object[0].active == 1 ? object[0].data : " "}
    {object[1].active == 1 ? object[1].data : " "}
    </div>
    );
  }
}

ReactDOM.render(<Objects />, document.querySelector('#object_display'));"

Ожидает исчезновения, но это не так.

Answer 1

Изменение внешних данных не приведет к обновлению вашего компонента. Вам необходимо либо изменить реквизиты, передаваемые компоненту, либо отслеживать его в состоянии внутри самого компонента.

Учтите это:

// data declared outside the component; gets passed as a prop
// in the ReactDOM.render call below.
const data = [
  {
    title: "Object 1"
  },
  {
    title: "Object 2"
  },
  {
    title: "Object 3"
  },  
]

class Objects extends React.Component {
  // initial state; start with the first item
  state = {index: 0}
  
  // onClick handler
  switch = () => {
    // get the current index out of this.state
    const {index} = this.state;

    // get the number of items in data so
    // we can loop back to 0 when we get to
    // the last item
    const {data: {length}} = this.props;

    // increment the index, don't go beyond length
    const newIndex = (index + 1) % length;

    // calling setState triggers a re-render
    // with the new index value
    this.setState({index: newIndex});
  }
  
  render () {
    const {data} = this.props;
    const {index} = this.state;
    const item = data[index];
    
    return (
      <div onClick={this.switch}>{item.title} (Click for next item)</div>
    );
  }
}

// data passed as a prop
ReactDOM.render(<Objects data={data} />, document.getElementById('app'))

<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="app" />