How can I affect the state of just one individual component(card) when i have multiple versions of that component?

Question

Current situation: I have a card component called LockedCard. The LockedCard is rendered to the page by being mapped using stored database information. It is on Home.js that these multiple cards exist. So it is rendered to the page as multiple separate versions of itself. On Home.js I have the state of locked: true. This causes each of the cards to appear locked when rendered, with a clickable lock icon.

Intended Goal: I need, when I click the lock icon on the LockedCard, for the program to reveal the security question (separate component called SecurityCard). It should only do this for that single card.

Current Problem: When I click the lock icon it changes every card on the screen to the SecurityCard Component. I need it to change only the one card that I click, not every single card in the program.

This is being made on PC Windows, I'm using normal React, not native.

I have tried to put the state in the child component(LockedCard) and that didn't work so i sent the state "locked: true" back to the parent component(Home.js)

I currently have it reading that the card is locked but when I click the lock icon nothing is happening. I have a clickHandler that handles when the lock icon is clicked, and that is a button and has worked in the past when I was able to unlock all the cards(which as a stated before was not the intended goal, but is proof that the clickHandler should work)

Parent(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>

Child(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;

Expected: When changing the state of locked to false it only happens on the specific card being clicked on

Actual Results: All the cards change

Answer 1

I would create a card component that holds the UI for both the security card and locked card, and than keep the state in that component. That state will determine which UI it renders

Example:

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;