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-uihttps://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!

classUsersextendsReact.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 (
     <divclass="ui cards">

      {
        this.state.sampleUsers.map(user =>
          <divclassName = "card"><divclassName = "content"><divclassName = "header > {user.name} </div>
              <div className = "description"> 
                {user.description}
              </div><divclasName="extra content"><divclassName="ui two buttons"><divclassName="ui basic green button">Edit</div><divclassName="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