React component disappears after one use

Question

My UpdateCard component disappears after one use.

The component allows users to edit a card.

The UpdateCard component shows when the current user is the same as the user that created the card.

I'm propping over the id for the card from another component for the current user and the card id.

After a user successfully edits the card with new information, they press submit, and the card is updated.

After the update occurs, if a user wants to make an edit again, they can't, because the Update CardComponent has disappeared.

I think this is something specific with react that I'm missing.

import React from "react"
import PropTypes from "prop-types"
import { Accordion, Icon, Input, Form, Button, Modal, Dropdown } from 'semantic-ui-react'

//components
import UpdateCard from "./UpdateCard"
import LikeUnlike from "./LikeUnlike"

class Card extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      activeIndex: null,
      search: '',
      currentUser: this.props.currentUser.id
    }
  }
    updateSearch = (event) => {
      this.setState({search: event.target.value.substr(0, 20)})
    }

    //Opens and closes the accordion
    handleClick = (e, titleProps) => {
      const { index } = titleProps
      const { activeIndex } = this.state
      const newIndex = activeIndex === index ? -1 : index
      this.setState({ activeIndex: newIndex })
    }

    render () {

    const { activeIndex } = this.state
    const { showEditMenu } = this

    let filteredCards = this.props.librarys.filter(
        (library) => {
          return library.title.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 || library.desc.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
        }
      )

    return (
      <React.Fragment>
        <div className='search-bar'>
          <Input fluid icon={<Icon name='search' inverted circular link />} value={this.state.search} onChange={this.updateSearch} placeholder="Search Syntaxes" />
        </div>
        <ul>
            {filteredCards.map((librarys, index)=>{
              return(
                <div key={index} >
                  <Accordion>
                    <Accordion.Title >
                      <Icon 
                        name='dropdown'
                        active={activeIndex === index}
                        index={index} 
                        onClick={this.handleClick}
                      />


                        <Icon name='trash alternate' 
                            onClick={() => {
                                this.props.handleDelete(librarys.id)}}
                        />


                      { 
                      //Update Icon
                        librarys.user && librarys.user.id === this.props.currentUser.id ?
                          <UpdateCard 
                            handleUpdate={this.props.handleUpdate} 
                            libraryId={librarys.id}
                            likes={librarys.likes}
                            librarys={librarys}
                          />
                        : '' 
                      }

                        Title: {librarys.title} Likes: {librarys.likes}
                      <LikeUnlike 
                        handleUpdate={this.props.handleUpdate} 
                        libraryId={librarys.id} 
                        librarys={librarys}
                      />
                    </Accordion.Title>
                    <Accordion.Content active={activeIndex === index}>
                        Description: <br></br>
                        {librarys.desc} <br></br>
                        Markdown: <br></br>
                        {librarys.markdown}
                    </Accordion.Content>
                  </Accordion>
                </div>
              )
            })}
        </ul>
      </React.Fragment>
    );
  }
}

export default Card

Answer 1

Happens to me as well, when I use setstate from click function, components tab blanks out and all tree of react components is gone.

onShowClick = e => {
  this.setState({
      showInfo: false
  });
 }