скрыть кнопку после нажатия внутри функции карты -Redux

Question

У меня есть несколько списков информации о местоположении с кнопкой добавления каждого элемента этого местоположенияЯ хочу скрыть эту кнопку «добавить местоположение» после добавления операции.Только определенная кнопка добавления должна быть скрыта после нажатия не всех кнопок добавления в этом списке

Я пробовал с состоянием кнопки true и false, используя setState и отключено.Но это отключение всех кнопок в этом списке.Я использую Redux для добавления операции.Я не знаю, как выполнить эту часть для уникального идентификатора местоположения

действие для добавления операции:

export const addLocation = mruCode =>({
  type: ADD_LOCATION,
  payload:mruCode
});

код действия для добавления всего местоположения:

export const addAllLocation = () =>({
    type : ALL_LOCATION
  });

код редуктора для добавления всего местоположения:

case 'ALL_LOCATION':
            return{
                ...state,
                conLocations:[...state.location]
            }

редуктор для операции добавления:

case 'ADD_LOCATION':
  let addedLoc = state.location.find(obj=>(obj.mruCode === action.payload))
  return{
    ...state,
    conLocations: [...state.conLocations,addedLoc]
  };

Полный код компонента:

export class NewLocationPanel extends React.Component{
    constructor(props){
        super(props);
        this.state={
               open:false,
               disableButton:-1
        };
        this.togglePanel = this.togglePanel.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.allLocations = this.allLocations.bind(this);
    }
    togglePanel (e){
        this.setState({open : !this.state.open});
    }
    handleClick (mruCode){
        return this.props.addLocation(mruCode);
     }
     allLocations (){
       return this.props.addAllLocation();
    }

    componentDidMount() {
        this.props.loadData();
      }
    render(){
        const _labels = store.getLabels();
        let collapsedToggle = this.props.open ? 'collapsed' : ''
        return(
            <div className="panel panel-default">
            <div className="panel-heading" onClick={(e)=>this.togglePanel(e)}>
              <div className="row">
              <div className="col-xs-12 col-sm-8 col-md-6 col-lg-6 panelHeadingLabel">
                     <span>{this.props.title}</span>
                     </div>
                        <div className="pull-right">
                        <span className="defaultHeaderTextColor">{this.props.location.map((loc,index)=>loc.primary===true ? (<span>{loc.mruCode} - {_labels[loc.division]} - {loc.country}</span>):null)}
                           <span onClick={(e)=>this.togglePanel(e)} className={this.state.open ? "collapse-chevronn" : "collapse-chevron"} aria-hidden="true"></span>
                   </span>
                    </div>
                </div>
           </div>
              {this.state.open?(
                        <div className="panel-body">
                             <div className="row grid-divider">
                             <div className="col-sm-6">
                             <div className="col-padding"><div className="pos-div"><h3>Locations List</h3><button className="allLargeBtn" onClick={()=>{this.allLocations()}}>Add all locations</button></div><hr/>
                             {this.props.location.map((item,index)=>(
                             <div key={index}><div><b>{item.mruCode} - {_labels[item.division]} - {item.country}</b>{!this.props.conLocations.includes(item.mruCode)&&(<div className="pull-right jd"><button className="call-to-action" onClick={()=>{this.handleClick(item.mruCode)}}>Add Location</button></div>)}<hr/></div></div>))}
                            </div>
                             </div> 
                                  <div className="col-sm-6">
                                   <div><ConfiguredLocation/></div>
                                  </div>
                                  </div> 
                    </div>):null}

            </div>

        );
    }
}

const mapStateToProps = state =>{
    return{
        location:state.locationRed.location,
        conLocations:state.locationRed.conLocations
    };
};

const mapDispatchToProps = (dispatch) => {
    return{
        loadData:()=>{dispatch(loadData())},
        addLocation:(mruCode)=>{dispatch(addLocation(mruCode))},
        addAllLocation:() =>{dispatch(addAllLocation())}
    }
}


export default connect(mapStateToProps,mapDispatchToProps)(NewLocationPanel);

mruCode - первичный уникальный идентификатор.конкретная кнопка добавления должна быть скрыта после нажатия.Подскажите пожалуйста как это сделать

Answer 1

Если я правильно понимаю, у вас есть список кнопок, соответствующих местоположениям, и вы хотите скрыть кнопки, которые уже были нажаты. В данный момент ваш компонент не имеет списка уже добавленных местоположений, поэтому сначала вам нужно будет передать его в mapStateToProps

const mapStateToProps = state =>{
    return{
        location:state.locationRed.location,
        conLocations:state.conLocations
    };
};

Затем в коде просмотра вы можете удалить кнопку, если местоположение уже добавлено

{this.props.location.map((item,index)=>(
  <div key={index}>
    <div>
      <b>{item.mruCode} - {_labels[item.division]} - {item.country}</b>
      {!this.props.conLocations.find(item2 => item.mruCode === item2.mruCode) && (
        <div className="pull-right jd">
          <button
            className="call-to-action"
            onClick={()=>{this.handleClick(item.mruCode)}}
          >
            Add Location
          </button>
        </div>
      )}
      <hr/>
    </div>
  </div>
))}