Как передать переменную из одного компонента в другой в объект?

Question

[maxemga]

Мне из одного Компонента, нужно изменить состояние объекта в другом, мне нужно из класса:

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      arr: [],
      activeModal: false
    }
  }

  render() {
    return (
      <div className='wrapper'>
        <div className='content'>
          <Title></Title>
          {this.state.arr.length === 0 ? <p>No todos!</p> : <TodoList list={this.arr}></TodoList>}
          <Button Click={() => this.setState({activeModal: true})}></Button>
          <ModalWindow active={this.state.activeModal}></ModalWindow>
        </div>
      </div>
    );
  }
}

Изменить состояние activeModal на false в этом классе:

class ModalWindow extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            value: '',
            active: this.props.active
        }
    }

    render() {
        return(
            <div className={this.props.active ? "modalOverlay modalOverlayActive" : "modalOverlay"}>
                    <div className='modalWindow'>
                        <div className='modalContent'>
                            <div className='modalClose' onClick={() => this.setState({active: false})}> <p>Close</p> </div>
                            <h1>Введите название</h1>
                            <form>
                                <input placeholder="Название"></input>
                            </form>
                            <Button></Button>
                        </div>        
                    </div>
                </div>
        )
    }
}

Но я не знаю, как обратиться в этом функции this.setState({active: false}) к activeModal, ибо active это ключ, а там написать this.props нельзя, я пробую в state присвоить active: this.props.active, но не работает, как сделать?

Answer 1

[Евгений Щербаков]

Немного непонятно написано, но если я правильно понял, то не знаю в чем у Вас проблема.

Как вариант (возможно и не самый лучший), Вы можете написать в классе App функцию обработчик, которая будет переводить ваш activeModal в false и передать эту функцию через props в ModalWindow. Внутри него заберете функцию из props и повесите на onClick в нужном Вам месте.