Необходимо запускать отдельный элемент в массиве элементов, записанных с помощью функции map responsejs

Question

class Services extends Component {
    constructor(props) {
        super(props);
        this.state = {showoffer: false};
      }
      showOffers=( )=>{  
        this.setState({showoffer: !this.state.showoffer});
      }
    render() {  
        return (
            <div className="OSServicesContainer">
            <img className="OSlogomark" src={logomark} alt="logo mark" />
                <article className="OssHeadingText">OOM INTERIORS OFFERS</article>
                {offersdata.map((offers,index)=>{
                return   ( <div key={index} className="OssoffersContainermain">
                                <div className="OssoffersContainer">
                                    <div className="OssofferHeadingmain">
                                        <article className="OssofferHeading">{offers.heading}</article>
                                    </div> 
                                        <article className="OssofferText">{offers.subheading}</article> 
                                    <div className="OssofferViewbtnmain">
                                        <article key={index} className="OssofferViewbtn" onClick={this.showOffers}>{this.state.showoffer?"View Less":"View More"}</article>
                                    </div>
                                </div>
                                {!this.state.showoffer?
                                    null:
                                <div className="OssOfferSubCompmain">
                                    {offers.offersub.map((offer,key) =>{
                                        return <OssOfferSubComp ofrtext={offer.text} ofrsubtext={offer.subtext} />
                                    })}
                                </div>}
                            </div>    
                                )
                })}
            </div>);
    }
}

export default Services;

Выше моего кода я хочу вызвать функцию showoffer и обновить только тот элемент, по которому щелкнули. Что мне делать, это запускать все элементы, как запускать отдельный элемент ??

Answer 1

Эй, если вы хотите, чтобы несколько элементов открывались одновременно, вы можете сделать что-то вроде этого, когда вы изменяете сопоставленный элемент, чтобы отслеживать скрытое состояние показа. Я добавил свойство visible к элементу списка, которое отслеживает, является ли элемент открытым или закрытым:

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  state = {
    items: [
      { header: "Test 1", extra: "Some extra content A" },
      { header: "Test 2", extra: "Some extra content B" },
      { header: "Test 3", extra: "Some extra content C" }
    ]
  };

  onItemClick(index) {
    const selected = this.state.items[index];
    this.setState({
      items: [
        ...this.state.items.slice(0, index),
        { ...selected, visible: !selected.visible },
        ...this.state.items.slice(index + 1)
      ]
    });
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.items.map((item, index) => {
            return (
              <li
                key={index}
                style={{ cursor: "pointer" }}
                onClick={() => this.onItemClick(index)}
              >
                <h3>{item.header}</h3>
                {item.visible ? <div>{item.extra}</div> : null}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

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

https://codesandbox.io/s/busy-germain-hdmrn

Answer 2

Вы можете попробовать что-то вроде этого: `Class Services extends Component {constructor (props) {super (props);this.state = {showoffer: 0};}

    showOffers = ( offerIndex ) => {  
        this.setState({showoffer: offerIndex});
    }

    hideOffers = () => {
        this.setState({showoffer: 0});
    }

    render() => {
       ... 
       <div className="OssofferViewbtnmain">
           <article key={index} onClick={ () => this.showOffers(index) }> 
               {this.state.showoffer?"View Less":"View More"}
           </article>
       </div>
       ...
       { 
           this.state.showOffer && this.state.showOffer === index
           ? // then show it
           : ''
        }
    }`