Editing And Deleting A Card In Semantic UI Using React.

I'm trying to add user functionality to my cards. I have already created the cards and would like the user to be able to edit the data inside the card and delete the card entirely

Solution 1:

At first there is native support for React by semantic-ui https://react.semantic-ui.com/introduction so I would advice you to use it.

Secondly I created a sandbox for you

Live view: https://n43z9w3o0.codesandbox.io/

Solution 2:

It's a bit hard to answer without seeing how you are storing sampleUsers, but basically, you would want to add a click handler to the Delete button, remove the item from sampleUsers and then rerender.

Here is an idea of one way to go about it to get you started. I haven't tested it, but hope it helps!

class Users extends React.Component {
  constructor() {
    super();
    this.state = {
      sampleUsers: [
        {
          id: 1,
          name: 'John',
          description: 'A nice guy'
        },
        {
          id: 2,
          name: 'Jane',
          description: 'A nice gal'
        }
     ]
   }
 }

 handleDeleteUser: (id) => {
   const sampleUsers = this.state.sampleUsers.filter(user => user.id !== id)
   this.setState({ sampleUsers });
 }

 render() {
   return (
     <div class="ui cards">

      {
        this.state.sampleUsers.map(user =>
          <div className = "card">
            <div className = "content">
              <div className = "header > {user.name} </div>
              <div className = "description"> 
                {user.description}
              </div>

              <div clasName="extra content">
                <div className="ui two buttons">
                  <div className="ui basic green button">Edit</div>
                  <div 
                    className="ui basic red button"
                    onClick={() => this.handleDeleteUser(user.id)}
                  >
                    Delete
                  </div>
                </div>
              </div>
            </div>
          </div>

        )
      }
    </div>
   )
 }

UPDATE As a commenter pointed out, there is a Semantic React wrapper library you might want to look at. It doesn't really address your question, but good to pass along https://react.semantic-ui.com