Reactjs - adding a read more button to an array to hide/show more than 3 items

You could render it conditionally. So you render the first three items of the array with a button that says read more. If you click on the button it changes the state of the conditional render to true, rendering the whole array instead of the first 3 items. Once you click on read more you could change it to hide with another conditional, using the same state. Once you press on hide again it will set the state to false and render the first three items again.

A code example:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [toggleHide, setToggleHide] = useState(false);
  const array = ["apple ", "pear ", "banana ", "melon ", "grapes "];
  const newArray = array.slice(0, 3);
  const [buttonText, setButtonText] = useState("read more");

  function handleClick() {
    if (!toggleHide) {
      setButtonText("hide");
    } else {
      setButtonText("read more");
    }
    setToggleHide(!toggleHide);
  }

  return (
    <div className="App">
      {!toggleHide ? <h1>{newArray}</h1> : <h1>{array}</h1>}
      <button onClick={() => handleClick()}>{buttonText}</button>
    </div>
  );
}

Codesandbox link: https://codesandbox.io/s/toggle-readme-w0c7id?file=/src/App.js

 maybe this will help you

import React, {useEffect, useState} from "react";

const Comp = ({car}) => {
    const [count, setCount] = useState([]);
    const [more, setMore] = useState(false);

    useEffect(() => {
        let arr = [];
        for (let i = 0, t = Math.floor(Math.random() * 5); i < t; i++) {
            arr.push(i);
        }
        return () => {
            arr.length >= 3 ? setMore(true) : setMore(false)
            setCount(arr);
        }
    }, []);

    const doSomething = () => {
        console.log('Your Logic Here')
    }

    return (
        <div>
            {count?.length > 0 &&
                count.map((i) => {
                    return <div key={i}>{i}</div>;
                })}
            {more && <button onClick={doSomething}> More List </button>}
        </div>
    );
    // return <li>{car.name}</li>;
};

export default Comp;