How can I get the title of the list item the user wants to save

Question

I am trying to grab the title of the list item when the user clicks the "Save Card" button and set it to a state. I have tried a few different ways but the console log keeps showing a blank line.

This is how the list is being populated:

<Col sm="12" md="7">
  <h1 style={{ textAlign: 'center', color: '#fff' }}>Results</h1>
  {this.state.cards.length ? (
    <List>
      {console.log(this.state.cards)};
      {this.state.cards.map((card) => {
        return (
          <ListItem style={{ textAlign: 'left' }} key={card.name}>
            {card.layout === 'transform' ? (
              <div>
                <img
                  className="cardImg"
                  src={card.card_faces[1].image_uris.small}
                  alt={card.card_faces[1].name}
                />
                <img
                  className="cardImg"
                  src={card.card_faces[0].image_uris.small}
                  alt={card.card_faces[0].name}
                />
              </div>
            ) : (
              <img
                className="cardImg"
                src={card.image_uris.small}
                alt={card.name}
              />
            )}
            <h4>{card.name}</h4>
            <h6>{card.mana_cost}</h6>
            <h6>{card.type_line}</h6>
            <h6>{card.set_name}</h6>
            <h6>{card.rarity}</h6>
            {card.layout === 'transform' ? (
              <div>
                <p>
                  {card.card_faces[0].name}: {card.card_faces[0].oracle_text}
                </p>
                <p>
                  {card.card_faces[1].name}: {card.card_faces[1].oracle_text}
                </p>
              </div>
            ) : (
              <p>{card.oracle_text}</p>
            )}
            <p>Commander Legality: {card.legalities.commander}</p>
            <p>Price in USD: {this.checkPrice(card.prices.usd)}</p>
            <p>Foil Price in USD: {this.checkPrice(card.prices.usd_foil)}</p>
            {sessionStorage.getItem('user') !== null ||
            this.state.username !== '' ? (
              <SaveBtn
                onClick={this.saveCard}
                className="submitBtn save-btn btn"
                style={{ backgroundColor: '#4e7781', color: '#fff' }}
              />
            ) : (
              ''
            )}
          </ListItem>
        )
      })}
    </List>
  ) : (
    <h3 style={{ textAlign: 'center', color: '#fff' }}>
      No Results to Display
    </h3>
  )}
</Col>

This is how I'm currently trying to get the name:

saveCard = (event) => {

  this.setState({
    cardName: this.key
  });
  console.log(this.state.cardName)

  API.SaveCard({
    name: this.cardName
  })
  .then((response) => {
    console.log("saved following card")
    console.log(response)
  })
};

Any help would be appreciated, here is also a link to my repo this code is located in the Database.js in the pages folder within src. https://github.com/EricVincitore/command-central

You can't access the value of key inside the component.Check out this SO https://stackoverflow.com/questions/33682774/how-to-access-the-key-property-from-a-reactjs-component — Moshe Sommers, May 11 '20 at 18:41
I tried the key property since it was equal to the name. Would it be easier for me to try to get the data from the card.name property. If so whats the best way to go about that. — EricVincitore, May 11 '20 at 18:57
Yes but you need to pass it as prop to whatever component your calling the function from. It's not very clear right now what you're trying to do.Does the value of name change at all? If not what are you saving and to where? — Moshe Sommers, May 11 '20 at 19:02

Ajeet Shah · Accepted Answer · 2020-05-11T19:18:16.777

You can use the arrow function and pass the card object:

<SaveBtn
  onClick={() => this.saveCard(card)}
  className="submitBtn save-btn btn"
  style={{ backgroundColor: '#4e7781', color: '#fff' }}
/>

and handle it in:

saveCard = (card) => {

  this.setState({
    cardName: card.name
  }, () => {
    console.log(this.state.cardName) // this prints correct cardName (we used callback)
  });

  console.log(this.state.cardName) // this will not print the correct card name because setState is async / batch operation

  API.SaveCard({
    name: card.name // use card object Or move this code in callback shown above
  })
  .then((response) => {
    console.log("saved following card")
    console.log(response)
  })
};

Please note the inline comments about setState callback and passing card as argument to saveCard.

Thank you! I now understand what I was doing wrong. – EricVincitore May 13 '20 at 17:52 — EricVincitore, May 13 '20 at 17:52

How can I get the title of the list item the user wants to save

1 Answers1