Как сделать кнопку больше-меньше на React чтобы скрыть или показать li?

Question

[AlexsaAlexsa]

Здравствуйте. Делаю приложение по поиску рецептов на React. Мне не нравится как показываются ингредиенты в рецептах , поэтому хочу сделать кнопку больше-меньше, оставив изначально при загрузке страницы 2 строки ингредиентов, т.е. 2 li. Нажав на кнопку больше- откроются все остальные li. Как это можно сделать?
Мой код
App.js

import { useEffect, useState } from 'react';
import MyRecipesComponent from './MyRecipesComponent';
import './App.css';
import video from './food.mp4';

function App() {
  
  const MY_ID = "  ";
  const MY_KEY = "  ";

  const [mySearch, setMySearch] = useState('');
  const [myRecipes, setMyRecipes] = useState([]);
  const [wordSubmitted, setWordSubmitted] = useState('tomato');

  useEffect(() => {
    async function getRecipes() {
      const response = await fetch(`https://api.edamam.com/api/recipes/v2?type=public&q=${wordSubmitted}&app_id=${MY_ID}&app_key=${MY_KEY}`);
      const data = await response.json();
      setMyRecipes(data.hits); 
    }
    getRecipes();
  }, [wordSubmitted]);

  const myRecipeSearch = (e) => {
    setMySearch(e.target.value);
  }

  const finalSearch = (e) => {
    e.preventDefault();
    setWordSubmitted(mySearch);
  }

  return (
    <div className="App">
      <div className='container'>
        <video autoPlay muted loop>
          <source src={video} type='video/mp4' />
        </video>
        <h1>Find a Recipe</h1>
      </div>
      <div className='container'>
        <form onSubmit={finalSearch}>
          <input placeholder='Search...' className='search' onChange={myRecipeSearch} value={mySearch}/>
        </form>
        <button onClick={finalSearch}>
          <img src='https://img.icons8.com/material-rounded/34/clear-search.png' alt='icon' />
        </button>
      </div>
      < div className='cont'>
        {myRecipes.map((element, index) => (
          <MyRecipesComponent 
          key={index}
          label={element.recipe.label} 
          image={element.recipe.image} 
          calories={element.recipe.calories} 
          ingredients={element.recipe.ingredientLines}
          />
        ))}
      </div>
    </div>
  );
}
export default App;

MyRecipesComponent.js

export default function MyRecipesComponent({label, image, calories, ingredients}) {

 return(<div>
        <div className='container pa'>
            <h2>{label}</h2>
        </div>
        <div className='container'>
            <img className="tasty" src={image} alt='dish' width='350px' height='350px'/>
        </div >
        <div className='container'>
            <p>{calories.toFixed()} calories</p>
        </div>
        <div  className='container'>
        <ul>
            {ingredients.map((ingredient, index) => (
                <li key={index}><img src='https://img.icons8.com/small/20/double-tick.png' alt='recipe' />{ingredient}</li>
            ))}
        </ul>
        </div>
    </div>
    );
 }

Буду благодарна за любую помощь и объяснение

Comments

[historydev]

По клику вешаете класс .active допустим.

div {
height: 300px;
overflow-y: hidden;
}
.active {
height: auto;
overflow-y: auto;
}

Answer 1

[0xD34F]

const [ showAll, setShowAll ] = useState(false);
const defaultShow = 2;
const showAllByDefault = ingredients.length <= defaultShow;
const ingredientsToShow = (showAll || showAllByDefault)
  ? ingredients
  : ingredients.slice(0, defaultShow);

{showAllByDefault
  ? null
  : <button onClick={() => setShowAll(val => !val)}>{showAll ? 'hide' : 'show'}</button>
}
<ul>
  {ingredientsToShow.map(n => <li>{n}</li>)}
</ul>

Comments

[AlexsaAlexsa]

Cпасибо, все работает. Все так, как я хотела.

Answer 2

[Владимир Коротенко]

https://6sc0bo.csb.app/

import React from 'react'
import ReactDOM from 'react-dom'


class App extends React.Component {
  constructor (props){
    super(props);
    this.state = {isExpanded: false};
    this.handleShowClick = this.handleShowClick.bind(this);
    this.handleHideClick = this.handleHideClick.bind(this);
  }
  handleShowClick() {
    this.setState({isExpanded: true});
  }

  handleHideClick() {
    this.setState({isExpanded: false});
  }
  render() {
    const isExpanded = this.state.isExpanded;
    let button;
    if (isExpanded) {
      button = <button onClick={this.handleHideClick} > hide</button>;
    } else {
      button = <button onClick={this.handleShowClick}> show</button>;
    }
    return (
      <div>
 {button}
 <ul>
        <li >1</li>
        <li >2</li>
        {isExpanded &&
        <>
        <li >3</li>
        <li >4</li>
        <li >5</li>
        </>
      }
        
      </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);