Set the Limit of Records in the map function and toggle By Button

Show Less

Show More


const [toggleLength, setToggleLength] = useState(false);


{
  data.slice(0, toggleLength ? 5 : undefined).map((item, index,) => {
     return (
 <>
<Chip key={index} className={classes?.modal_chip} variant="subtitle2" component="body2"
label={(<> <span> {item.loantype} </span> <b> - {item.amount}</b></>)} />                                                </>
 ) })
}

 <Chip onClick={() => setToggleLength(!toggleLength)} className={classes?.modal_chip} variant="subtitle2" component="body2" variant="outlined"
  label={(<> <span> {toggleLength ? "Show More..." : 'Show Less...'} </span> </>)} />