CODEWITHSUNDEEP
javascriptreactjs
Harry Edward
Harry Edward

Reputation: 151

React Toggle on map function

Here i have an onClick in map function, if i click onClick it will effect all the input text, how to do it only for particular ID 

constructor(props) {
    super(props);
    this.state = {Edit: false};    
    this.handleClick = this.handleClick.bind(this);
}

  handleClick(){
    this.setState(state => ({
      EDIT: !state.EDIT
    }));
  }
......................

<ul>
 {data.map(item=>
  <div key={item._id}>
  <li>{item.name}</li>
  <li>
        <button onClick={this.handleClick}>edit</button
        {this.state.EDIT ?
        <form onSubmit={this.handleSubmit}>
              <input type="text"/>
              <input type="submit" value="Submit" />
        </form>
        : item.color
      }
  </li>
  </div>
 )}
</ul>

Upvotes: 1

Views: 2329

Answers (3)

ravibagul91
ravibagul91

Reputation: 20765

You must pass the id to handleClick function, also to make form visible for specific id only you need another condition like this.state.activeID === item._id && this.state.EDIT, 

<ul>
 {data.map(item=>
  <div key={item._id}>
  <li>{item.name}</li>
  <li>
        <button onClick={()=>this.handleClick(item._id)}>edit</button>
        {this.state.activeID === item._id && this.state.EDIT ? //This will confirm specific `item._id` form will get visible
        <form onSubmit={this.handleSubmit}>
              <input type="text"/>
              <input type="submit" value="Submit" />
        </form>
        : item.color
      }
  </li>
  </div>
 )}
</ul>

constructor(props) {
    super(props);
    this.state = {
       Edit: false,
       activeID:'' //new state variable
    };    
    this.handleClick = this.handleClick.bind(this);
}

  handleClick(id){
    this.setState(state => ({
      EDIT: !state.EDIT,
      activeID: id
    }));
  }

Update

You may avoid use of EDIT state variable, but in case you need to show toggle effect, you can make use of EDIT like,

<button onClick={()=>this.handleClick(item._id)}>{!this.state.EDIT ? 'Show Form' : 'Hide Form'}</button>

In this case on the click of button you can show/hide the form.

Upvotes: 0

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15698

You can pass a anonymous function as your event-handler, and through that, call handleClick, passing it the id of the item to edit.

However, that is not enough to conditionally display the form. Instead of having this.state.Edit simply be a true or false value. You should have it record the id of the currently selected item instead.

Event-handler

  handleClick(id){
    this.setState({
      EDIT: id
    })
  }

Map

<ul>
 {data.map(item=>
  <div key={item._id}>
  <li>{item.name}</li>
  <li>
        <button onClick={() => this.handleClick(item._id)}>edit</button>
        {this.state.EDIT == item._id ?
        <form onSubmit={this.handleSubmit}>
              <input type="text"/>
              <input type="submit" value="Submit" />
        </form>
        : item.color
      }
  </li>
  </div>
 )}
</ul>

Alternatively, you will have to make some updates to your code to get the updating/saving-functionality to work as expected.

See sandbox for working code: https://codesandbox.io/s/sweet-johnson-ploqb

Upvotes: 1

Joseph
Joseph

Reputation: 692

you can pass the id as argument to event handler

  handleClick(id){
    this.setState(state => ({
      [`EDIT_${id}`]: true
    }));
  }
......................

<ul>
 {data.map(item=>
  <div key={item._id}>
  <li>{item.name}</li>
  <li>
        <button onClick={() => this.handleClick(item._id)}>edit</button
        {this.state[`EDIT_${item._id}`] ?
        <form onSubmit={this.handleSubmit}>
              <input type="text"/>
              <input type="submit" value="Submit" />
        </form>
        : item.color
      }
  </li>
  </div>
 )}
</ul>

Upvotes: 0

Related Questions