how to toggle array of item in reactjs-CodePudding

I have got an array. I want to get a show and hide array item based on the toggle. when I click one first item, it would be expanded and when I click on the second item, the second item will be expanded and The previous item will be hidden.

class App extends Component {

  constructor() {
    super();
    this.state = { show: false };
  }

  handleClick() {
    this.setState({
      show: !this.state.show,
    });
  }

  render() {
    return (
      <div className="App">
        {[1, 2,3].map((item) => (
          <div>
            <button onClick={() => this.handleClick()}>Toggle </button>
            <p>{this.state.show === true ? 'SHOW' : 'HIDE'}</p>
          </div>
        ))}
      </div>
    );
  }
}

Here is my trying code : https://stackblitz.com/edit/react-7y4pcs

CodePudding user response：

You could store an array of objects as a state and map through it.
In the handleClick method toggle the show property of the specified id:

class App extends Component {
  constructor() {
    super();
    this.state = {
      items: [
        {
          id: 1,
          show: false,
        },
        {
          id: 2,
          show: false,
        },
      ],
    };
  }

  handleClick(id) {
    const item = this.state.items.find((item) => item.id === id);
    const newItems = [...this.state.items];
    newItems.find(item => item.id === id).show = !item.show
    this.setState({
      items: newItems
    });
  }

  render() {
    return (
      <div className="App">
        {this.state.items.map((item) => (
          <div key={item.id}>
            <button onClick={() => this.handleClick(item.id)}>Toggle </button>
            <p>{item.show ? 'SHOW' : 'HIDE'}</p>
          </div>
        ))}
      </div>
    );
  }
}

CodePudding user response：

Solution testing item:

    import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = { show: 0 };
  }

  handleClick(i) {
    this.setState({
      show: i,
    });
  }

  render() {
    return (
      <div className="App">
        {[1, 2, 3].map((item, i) => (
          <div key={i}>
            <button onClick={() => this.handleClick(item)}>
              Toggle {item}
            </button>
            <p
              style={{
                display: this.state.show === item ? 'block' : 'none',
              }}
            >
              Some content {item}
            </p>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

Solution testing index:

import React, { Component } from 'react';

class App extends Component {
  constructor() {
    super();
    this.state = { show: 0 };
  }

  handleClick(i) {
    this.setState({
      show: i,
    });
  }

  render() {
    return (
      <div className="App">
        {[1, 2, 3].map((item, i) => (
          <div key={i}>
            <button onClick={() => this.handleClick(i)}>
              Toggle {item}
            </button>
            <p
              style={{
                display: this.state.show === i ? 'block' : 'none',
              }}
            >
              Some content {item}
            </p>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

If you want all previous to be open, juste change the test "===" by ">="