Estoy tratando de implementar Mostrar más / Mostrar menos. Hasta ahora, he podido abrir un Componente ItemViewer donde visualizo la lista de elementos. Para cada sección habría enlaces Mostrar más / Mostrar menos. Mostrar más debe estar visible siempre que el número de elementos sea mayor que 3 y debe poder alternar (Mostrar más / Mostrar menos). Cuando el número de artículos es inferior a 3, no muestre el enlace. También cuando no hay visualización de datos «No se encontraron datos».

Se me ocurrió una caja de arena: https://codesandbox.io/s/pensive-kirch-1fgq3

¿Puede alguien ayudarme aquí?

import React from "react"; import ReactDOM from "react-dom"; import ItemViewer from "./Item"; const item1 = ["i1d1", "i2d2", "i3d3"]; const item2 = ["i2d1", "i2d2", "i2d3", "i2d4"]; const item3 = ["i3d1", "i3d2", "i3d3", "i3d4", "i3d5"]; class App extends React.Component { constructor(props) { super(props); this.state = { item1: [], item2: [], item3: [] }; } componentDidMount() { this.setState({ item1, item2, item3 }); } render() { let { item1, item2, item3 } = this.state; return ( {amp}lt;{amp}gt; {amp}lt;ItemViewer index="1" item="item1" itemData={item1} /{amp}gt; {amp}lt;ItemViewer index="2" item="item2" itemData={item2} /{amp}gt; {amp}lt;ItemViewer index="3" item="item3" itemData={item3} /{amp}gt; {amp}lt;/{amp}gt; ); } } 
 import React, { useState } from "react"; const ItemViewer = props ={amp}gt; { function renderItems(list, itemType) { if (list {amp}amp;{amp}amp; list.length {amp}gt; 0) { return ( {amp}lt;{amp}gt; {amp}lt;ul{amp}gt; {list.map(function(item) { return {amp}lt;li key={item}{amp}gt;{item}{amp}lt;/li{amp}gt;; })} {amp}lt;/ul{amp}gt; {amp}lt;/{amp}gt; ); } else { return {amp}lt;p{amp}gt;No Items Found{amp}lt;/p{amp}gt;; } } return ( {amp}lt;div{amp}gt; {amp}lt;span{amp}gt; {props.index}: {props.item} {amp}lt;/span{amp}gt; {amp}lt;div{amp}gt; {amp}lt;a href="#"{amp}gt;Show more{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;a href="#"{amp}gt;Show Less{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;{renderItems(props.itemData, props.item, props.itemDetailData)}{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); }; export default ItemViewer; 

Puede mantener un estado de alternancia dentro del componente ItemViewer, y usando ese valor puede decidir mostrar más o menos.

Códigos y caja

 import React, { useState } from "react"; const ItemViewer = ({ index, itemData, item }) ={amp}gt; { const [toggle, setToggle] = useState(false); function renderItems(list) { if (list {amp}amp;{amp}amp; list.length {amp}gt; 0) { if (list.length {amp}gt; 3 {amp}amp;{amp}amp; toggle === false) { return renderList(list.slice(0, 3), "Show More"); } else if (list.length {amp}gt; 3 {amp}amp;{amp}amp; toggle === true) { return renderList(list, "Show Less"); } else if (list.length === 3) { return renderList(list, "", false); } } else { return {amp}lt;p{amp}gt;No Items Found{amp}lt;/p{amp}gt;; } } function renderList(list, buttonText, showButton = true) { return ( {amp}lt;div{amp}gt; {amp}lt;ul{amp}gt; {list.map(function(item) { return {amp}lt;li key={item}{amp}gt;{item}{amp}lt;/li{amp}gt;; })} {amp}lt;/ul{amp}gt; {showButton {amp}amp;{amp}amp; ( {amp}lt;div{amp}gt; {amp}lt;button onClick={toggleHandler}{amp}gt;{buttonText}{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; )} {amp}lt;/div{amp}gt; ); } const toggleHandler = () ={amp}gt; { setToggle(prev ={amp}gt; !prev); }; return ( {amp}lt;div{amp}gt; {amp}lt;span{amp}gt; {index}: {item} {amp}lt;/span{amp}gt; {amp}lt;div{amp}gt;{renderItems(itemData)}{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); }; export default ItemViewer; 

use el estado del componente y el oyente onClick:

  function renderItems(list, itemType) { if (list {amp}amp;{amp}amp; list.length {amp}gt; 0 {amp}amp;{amp}amp; this.state.showMore1) { ... {amp}lt;div{amp}gt; {" "} {amp}lt;a onClick={() ={amp}gt; this.setState({ showMore1: !this.state.showMore1 )} href="#"{amp}gt;Show {this.state.showMore1 ? 'Less' : 'More'}{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; 

Use un controlador para mostrar eventos.

https://codesandbox.io/s/blissful-swirles-rchv0

  handleShowEvents(index) { let showMore = [...this.state.showMore]; showMore[index] = !showMore[index]; this.setState({ ...this.state, showMore: showMore }); } 

Además, use un generador de listas personalizado.

  itemBuilder() { let items = []; for (let i = 0; i {amp}lt; this.state.showMore.length; i  ) { const item = `item${i   1}`; if (this.state.showMore[i]) { items.push( {amp}lt;ItemViewer index={i} item={item} itemData={this.state.items[i]} handleShowEvents={this.handleShowEvents} /{amp}gt; ); } else { items.push( {amp}lt;ItemViewer index={i} item={item} itemData={this.state.items[i].slice(0, 3)} handleShowEvents={this.handleShowEvents} /{amp}gt; ); } } return items; } 

Echa un vistazo a este https://codesandbox.io/s/smoosh-shape-vinp6

Avísame si te funciona.

Happy Coding :)