如何在ReactJs中设置各个状态以在map函数内呈现组件

Question

I have a react component which has 3 radio buttons.Along with the radio buttons, I have an edit button which opens up a separate component when that particular edit button inside the radio button is clicked.But, the last radio button will not have the edit button inside the radio button. So,to render the edit component on click of the edit button, I have added state value inside my component as:

this.state = {
      isDrawerOpen: false,
      options: ['abc.sce.com', 'def.sce.com', 'No email alerts'],
}

So, I am rendering my radio buttons using a map function and below the radio button the new component should be called on the click of the edit button which is inside the radio button.

So, my code looks like below:

{this.state.options.map((email, i, arr) => {
          return (
           <RadioButtonComponent />   
                {!(arr[i].includes('No email alerts')) ? (
                  <button
                      id='editEmail'
                      onClick={this.handleEmailToggle} /> ) :
                  null}

               {this.state.isDrawerOpen ?  <OpenComponentOnEditClickOfRadiButton /> : null}

          );

My handleEmailToggle() function which is called on the edit button click is as follows:

  handleEmailToggle() {
    this.setState({ isDrawerOpen: true });
  }

So, when the edit button is clicked, the component <OpenComponentOnEditClickOfRadiButton /> should open.Now what is happening is when I am clicking on any one of the edit button of the radio button,the component <OpenComponentOnEditClickOfRadiButton /> is opening for all the radio buttons, even for the last radio button which doesn't have the edit button.So, how to set individual state for each edit button and render the new component only for that corresponding button?

Answer 1

you should try this:

{this.state.options.map((email, i, arr) => {
      return (
       <RadioButtonComponent />   
            {!(arr[i].includes('No email alerts')) ? (
              <button
                  id='editEmail'
                  onClick={e => this.handleEmailToggle(e, email)} /> ) :
              null}

           {this.state.isDrawerOpen ?  <OpenComponentOnEditClickOfRadiButton /> : null}

      );

and update your handleEmailToggle to:

handleEmailToggle(e, email) {
  // use email passed from map
  this.setState({ isDrawerOpen: true });
}

Answer 2

Long ago, I faced the same issue as yours. I have done the following which did a trick:

const EditComp = () => <button type='button'>Edit</button>

class App extends Component {
    state = {
      isDrawerOpen: [],
      radioButton : [
        { id: "radio1", name: "male", edit: false,value: "male" },
        { id: "radio2", name: "female", edit: false, value: "female" }
      ],
      val: []
    };


  handleEmailToggle(event, currentIndex) {
    let showEdit = this.state.isDrawerOpen.map((val, index) => {
        return (val = false);
    }); 
    let isDrawerOpen = showEdit.slice();
    isDrawerOpen[currentIndex] = true;
    this.setState({ isDrawerOpen });
  }

  render() {
    return (
      this.state.radioButton.map((ele,index) => (
        <>
            <button key={ele.id} 
              onClick={e => this.handleEmailToggle(e, index)}>
            {ele.name} </button><br/>
            {this.state.isDrawerOpen[index] ? <EditComp /> : null}
            <br/>

        </>
      ))
    );
  }
}

what I did is, on each button click showed a edit button respectively.On every click current element index will be passed to the function and there's a state isDrawerOpen which stores each index with true/false respectively on particular element.

Hope this helps to solve your query. Code demo