Как я могу повлиять на состояние только одного отдельного компонента (карты), когда у меня есть несколько версий этого компонента?

Question

Текущая ситуация: У меня есть компонент карты под названием LockedCard. LockedCard отображается на странице путем сопоставления с использованием сохраненной информации базы данных. Именно на Home.js эти несколько карт существуют. Таким образом, он отображается на странице в виде нескольких отдельных версий. На Home.js у меня состояние заблокировано: true. Это приводит к тому, что при рендеринге каждая карта выглядит заблокированной со щелкающим значком блокировки.

Предполагаемая цель: Мне нужно, когда я нажимаю значок блокировки на LockedCard, чтобы программа раскрыла секретный вопрос (отдельный компонент под названием SecurityCard). Это следует делать только для этой единственной карты.

Текущая проблема: Когда я щелкаю значок замка, он заменяет каждую карту на экране на Компонент SecurityCard. Мне нужно изменить только одну карту, которую я нажимаю, а не каждую карту в программе.

Это делается на ПК с Windows, я использую обычный React, а не нативный.

Я попытался поместить состояние в дочерний компонент (LockedCard), но это не сработало, поэтому я отправил состояние «locked: true» обратно в родительский компонент (Home.js)

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

Родитель (Home.js)

class Home extends Component {

  state = {
    title: "",
    note: "",
    modal: [],
    attempts: 3,
    isCorrect: false,
    locked: true,
    answer: '',
    noteTotal: 0,
    modalOpen: false
  };

}
=============
  handleLockButtonClick = () => {
    this.setState({
      locked: false
    })
  }

=============

 {this.state.locked ? (
            <Grid.Row stackable columns={3}>
            {this.state.modal.map((card) => {
              return (
              <GridColumn>
                <LockedCard
                  handleLockButtonClick={this.handleLockButtonClick}
                  title = {card.title}
                  notes = {this.state.noteTotal}
                  locked = {this.state.locked}
                />
              </GridColumn>
              )
            })}
            </Grid.Row>
          ) : (
              this.state.isCorrect ? (
                <Grid.Row stackable columns={3}>
                  {this.state.modal.map((card) => {
                    return (
                      <GridColumn>
                        <PassCard
                          title={card.title}
                          note={card.note}
                        />
                      </GridColumn>
                    )
                  })}
                </Grid.Row>
              ) : (
                  <Grid.Row stackable columns={3}>
                    {this.state.modal.map((card) => {
                      return (
                        <GridColumn>
                          <SecurityCard
                            handleAnswerInput={this.handleAnswerInput}
                            title = {card.title}
                            name="answer"
                            value={this.state.answer}
                            handleAnswerSubmit={this.handleAnswerSubmit}
                            question={securityArray[0].question}
                            attempts = {this.state.attempts}
                          />
                        </GridColumn>
                      )
                    })}
                  </Grid.Row>
                  )
              )}
        </Grid>

Ребенок (LockedCard)

class LockCard extends Component {
    render() {
        return (
            <Card centered locked={this.props.locked}>
                <Card.Content header={this.props.title} />
                <Card.Content className="card-center" description="Click the lock to answer a question and unlock this cards information" />
                <button id="lock-btn" className="ui primary button lock-button" onClick={() => this.props.handleLockButtonClick}><i className="fas fa-lock"></i></button>
                <Card.Content className="dark" extra>
                    <Icon name='clipboard' />
                    {this.props.notes} Notes
            </Card.Content>
            </Card>
        )
    }
}
export default LockCard;

Ожидаемое: При изменении состояния «заблокировано» на «ложь» это происходит только при нажатии определенной карты

Фактические результаты: все карты меняются

Answer 1

Я хотел бы создать компонент карты, который содержит пользовательский интерфейс для карты безопасности и заблокированной карты, а затем сохранить состояние в этом компоненте. Это состояние будет определять, какой интерфейс он отображает

Пример:

class MainCard extends Component {
    state = {
        locked: true
    }

    handleLockButtonClick = () => {
        this.setState({
          locked: false
        })
      }

    renderLockedCard = () => {
        return (
            <Card centered locked={this.props.locked}>
            <Card.Content header={this.props.title} />
            <Card.Content className="card-center" description="Click the lock to answer a question and unlock this cards information" />
            <button onClick={handleLockBtnClick} id="lock-btn" className="ui primary button lock-button"><i className="fas fa-lock"></i></button>
            <Card.Content className="dark" extra>
                <Icon name='clipboard' />
                {this.props.notes} Notes
        </Card.Content>
        </Card> 
        )
    }

    renderUnlockedCard = () => {
        <Card centered locked={this.props.locked}>
        {/* Unlocked Card Content */}
    </Card>
    }
    render() {
       return this.state.locked ? this.renderLockedCard() : this.renderUnlockedCard()
    }
}
export default MainCard;