Toggle class for clicked element only in React.js

Question

I have a contact list with Edit button. When it's clicked I want to make the <div> with inputs to appear. Currently, when the button is clicked, this <div> is showing for all elements in my contact list. Here's the code. I did not put here code which fetches contacts from API etc.

```

class App extends Component {

  state = {
    contacts: [],
    firstName: '',
    lastName: '',
    phoneNumber: '',
    email: '',
    editVisible: true
  };

  showEditDiv = (id) => {
    this.setState({
      editVisible: !this.state.editVisible
    })
  };

  render() {

  const visibility = this.state.editVisible ? 'unvisible' : 'visible';

    return (
        <ul>
          {this.state.contacts.map(contact => {
            return (
              <div>
                <li key={contact.id}>
                  <p>{contact.firstName} {contact.lastName}</p>
                  <p>{contact.phoneNumber}</p>
                  <p>{contact.email}</p>
                  <button onClick={() => this.removeContact(contact.id)}>Remove</button>
                  <button onClick={() => this.showEditDiv(contact.id)}>Edit</button>
                  <div key={contact.id} className={`edit-form ${visibility}`}>
                    <p>This is edit form</p>
                  </div>
                </li>
              </div>
            )
          })}
        </ul>
      </div>
    );
  }
}

export default App;

.edit-form {
  height: 100px;
  background: #a7a7a7;
}

.unvisible {
  display: none;
}

.visible {
  display: block;
}

It seems like you have an extra closing </div> tag at the end of your render method - this may be causing you layout problems — Dacre Denny
– Dacre Denny, Commented Aug 12, 2018 at 20:52

devserkan · Accepted Answer · 2019-12-04 09:24:37Z

3

For your situation, you need to keep a separate property in your state and set the visibility for individual items. Here is a working example. If I were you I would extract contact item into its own component and get rid of those function invoking in your onClick handlers.

class App extends React.Component {
  state = {
    contacts: [
      { id: 1, firstName: "foo", lastName: "foo", email: "[email protected]" },
      { id: 2, firstName: "bar", lastName: "bar", email: "[email protected]" }
    ],
    firstName: "",
    lastName: "",
    phoneNumber: "",
    email: "",
    editVisibles: {}
  };

  showEditDiv = id => {
    this.setState(prevState => ({
      editVisibles: {
        ...prevState.editVisibles,
        [id]: !prevState.editVisibles[id]
      }
    }));
  };

  render() {
    return (
      <ul>
        {this.state.contacts.map(contact => {
          return (
            <div>
              <li key={contact.id}>
                <p>
                  {contact.firstName} {contact.lastName}
                </p>
                <p>{contact.email}</p>
                <button onClick={() => this.removeContact(contact.id)}>
                  Remove
                </button>
                <button onClick={() => this.showEditDiv(contact.id)}>
                  Edit
                </button>
                <div
                  key={contact.id}
                  className={`edit-form ${
                    !this.state.editVisibles[contact.id]
                      ? "unvisible"
                      : "visible"
                  }`}
                >
                  <p>This is edit form</p>
                </div>
              </li>
            </div>
          );
        })}
      </ul>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.edit-form {
height: 100px;
background: #a7a7a7;
}

.unvisible {
display: none;
}

.visible {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

edited Dec 4, 2019 at 9:24

answered Aug 12, 2018 at 20:46

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

muszynov Over a year ago

Thanks for this! That's the working one. I've just started with deploying small app so for the start I put everything to App.js . Later I divide these parts into small components.

midhun k Over a year ago

but is it possible if one opens and when you click on next the already open should close and the clicked one should only open. I am facing same issue..Can you help @devserkan

devserkan Over a year ago

@midhunk, then keep only one visible state property and set its value to the item's id maybe if I understand you right.

midhun k Over a year ago

you are right,can you show the above example in jsfiddle like tat,will be great..

devserkan Over a year ago

You only need to change those: editVisible: undefined i removed the "s" since it is not a plural anymore. setting state: this.setState({ editVisible: id}) and div part ${this.state.editVisible !== contact.id ? "unvisible" : "visible"}

StackedQ · Accepted Answer · 2018-08-12 20:57:36Z

2

Instead of editVisible you could use 'contact.id`, meaning:

showEditDiv = (id) => { 
   this.setState(prevState => ({ editingContactId: prevState.editingContactId === id? null:id})) 
};

And the the div would be:

<div key={contact.id} className={contact.id === this.state.editingContactId?'edit-form visible' :'edit-form unvisible'}>
  ... 
</div>

edited Aug 12, 2018 at 20:57

answered Aug 12, 2018 at 20:48

StackedQ

4,1491 gold badge30 silver badges42 bronze badges

1 Comment

muszynov Over a year ago

Thanks! That's kinda good solution, but I have to figure out how to hide same div when Edit is clicked again.

Collectives™ on Stack Overflow

Toggle class for clicked element only in React.js

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related