Editing and deleting a card in semantic UI using react.

Question

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 if they wish.

Deleting should look something like this example of deleting a card using jquery . I'm new to react and am good at jquery. I was wondering what the steps were to transform that code into react code. Any advice would be greatly appreciated!

<div class="ui cards">

        {
          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">Delete</div>
                  </div>
                </div>
              </div>
            </div>

          )
        }
</div>

Answer 1

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

Answer 2

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/